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 值还是没有变化。

    如果在表单 onChangeonInput 此类值改变回调中 setState value 为用户操作改变表单之前的值时,Taro 的 diff 逻辑会判断 setState 的 value 值和当前 data.value 一致,则放弃 setData,导致视图没有正确更新。

    解决办法:

    Input 组件可以通过在回调中 return 需要改变的值来更新视图。详见 #2642

    小程序 Input 组件文档截图:

    其它组件需要立即 setState({ value: e.detail.value }) 以立即更新同步 data.value 值,然后再 setState 真正需要表单改变的值。详见 #1981#2257


登录后回复