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 => {
        // 下發設定溫度
        ...
    }}
/>