5. PickerView受控后，渲染问题

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

    0
登录后回复