antd-mobile中Picker选项更新的问题

antd-mobile中Picker选项更新的问题

需求

如图，Picker按钮上显示的数值是设备的设定温度，可以在点击后通过弹窗选项来修改这个设定温度。同时，设备端或其他手机端也可以修改这个温度，所以这个设定温度是随着设备的实际状态而实时变化的。
每次打开弹窗时，选中项和当前显示的应该一致，即设备实际设定温度。

问题

如果按照上述需求直接写，picker中引入value值，则弹框变成可控组件，就会出现选中项被设备实时温度改变的情况。比如，当前设定108度，打开弹窗选成110度后还没有点击确定，这时在设备上或其他手机上把温度改为105度，则picker选项会被更新一下，表现出来的bug就是选中的110度突然跳变成105度了。
改进
不要value了，将当前实时温度放到defaultValue中，这样首次进入，加载的选中项是对的，选择过程中也不会收实时温度参数变化的影响，但又出了一个问题，第二次以后再打开，picker的选中项是上次选中下发的，如果期间设备设定温度改变了打开又会不一致。比如，原来是108度，点开弹框滑动到110下发了，这时再打开弹框是110度被选中没问题，但如果关闭弹框用设备或其他手机改变设定的温度为105度，这时再打开弹框仍然被选中110度——新的bug又诞生了。
这个问题在以前项目使用antd-modile-v2的时代遇到过，翻了一下找到了class时代留下的印记。一年后用useMemo重写，原理和这个差不多。

结果

现在已经到了antd-modile-v5时代，弹框显隐由state控制，想想需求实际上是在弹框显隐变化时刷新一下即可。经过仔细琢磨，启用了key属性，值为控制显隐的state，目的达到了，代码依然优雅简洁！

// 控制弹框显隐
const [temPickerVisible, setTemPickerVisible] = useState(false)
// bakeTargetTemperature-设备上报的设定温度
<Picker
    key={
    
    temPickerVisible}
    columns={
    
    ...}
    visible={
    
    temPickerVisible}
    onClose={
    
    () => setTemPickerVisible(false)}
    defaultValue={
    
    bakeTargetTemperature}
    onConfirm={
    
    async v => {
    
    
        // 下发设定温度
        ...
    }}
/>