PickerView受控后,渲染问题
-
问题描述
PickerView通过控制value值受控,总共三列,在change事件里setState设置value,来选中特定的值。第一列index不变,也就是数组的第一个不变,PickerView不会渲染
复现步骤
原本value值是[1,4,4],设置成[1,5,6]这种是不会渲染的,要设置成[0,5,6]才行
初始state是[1,2,2],滚动完触发onChange后,是成功把值设置成了[1,3,3],但是我再滚动一下,就没法渲染成[1,3,3]该有的样子了。场景是我选择错误的日期,就要回滚到一个固定的日期,连续两次选择错误的日期,第二次就没效果了。
这个value的受控是不是没法完全受控?就像我这里如果value写死[1,2,2],我去滚动,渲染的样子还是会随着我的滚动而变,不会把值固定成[1,2,2],自己回滚回来
期望行为
渲染正常
报错信息
没有报错
系统信息
"dependencies": { "@tarojs/async-await": "^1.2.13", "@tarojs/components": "1.2.13", "@tarojs/mobx": "1.2.13", "@tarojs/mobx-h5": "1.2.13", "@tarojs/mobx-rn": "1.2.13", "@tarojs/rn-runner": "1.2.13", "@tarojs/router": "1.2.13", "@tarojs/taro": "1.2.13", "@tarojs/taro-alipay": "1.2.13", "@tarojs/taro-h5": "1.2.13", "@tarojs/taro-swan": "1.2.13", "@tarojs/taro-tt": "1.2.13", "@tarojs/taro-weapp": "1.2.13", "mobx": "4.8.0", "mobx-persist": "^0.4.1", "nerv-devtools": "^1.3.9", "nervjs": "^1.3.9", "taro-ui": "^2.0.0" }, "devDependencies": { "@tarojs/plugin-babel": "1.2.13", "@tarojs/plugin-csso": "1.2.13", "@tarojs/plugin-sass": "1.2.13", "@tarojs/plugin-uglifyjs": "1.2.13", "@tarojs/webpack-runner": "1.2.13", "@types/react": "16.3.14", "@types/webpack-env": "^1.13.6", "@typescript-eslint/eslint-plugin": "^1.4.0", "@typescript-eslint/parser": "^1.4.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-jsx-stylesheet": "^0.6.5", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", "eslint": "^5.14.1", "eslint-config-taro": "1.2.13", "eslint-plugin-import": "^2.12.0", "eslint-plugin-react": "^7.8.2", "eslint-plugin-taro": "1.2.13", "typescript": "^3.2.2" }
补充信息
无
Chen-jj 回复:
微信小程序表单组件不是受控组件,当用户操作表单时视图会立即改变,但表单的 value 值还是没有变化。
如果在表单
onChange
、onInput
此类值改变回调中 setState value 为用户操作改变表单之前的值时,Taro 的 diff 逻辑会判断 setState 的 value 值和当前 data.value 一致,则放弃 setData,导致视图没有正确更新。解决办法:
Input 组件可以通过在回调中 return 需要改变的值来更新视图。详见 #2642
小程序 Input 组件文档截图:
其它组件需要立即 setState({ value: e.detail.value }) 以立即更新同步 data.value 值,然后再 setState 真正需要表单改变的值。详见 #1981、#2257