The problem of Picker option update in antd-mobile
need
As shown in the figure, the value displayed on the Picker button is the set temperature of the device, which can be modified through the pop-up option after clicking. At the same time, the device or other mobile phones can also modify the temperature, so the set temperature changes in real time with the actual state of the device.
Every time the pop-up window is opened, the selected item should be consistent with the currently displayed one, that is, the actual set temperature of the device.
question
If you directly write according to the above requirements and introduce the value value into the picker, the pop-up box will become a controllable component, and the selected item will be changed by the real-time temperature of the device. For example, if the current setting is 108 degrees, the pop-up window is opened and the temperature is set to 110 degrees without clicking OK. At this time, if the temperature is changed to 105 degrees on the device or other mobile phones, the picker option will be updated, and the displayed bug is The selected 110 degrees suddenly jumped to 105 degrees.
The improvement
does not need value, put the current real-time temperature in defaultValue, so that the first time you enter, the loaded selected item is correct, and the influence of real-time temperature parameter changes will not be received during the selection process, but there is another problem, the second time If you open it later, the selected items of the picker are the ones selected last time, and if the set temperature of the device is changed during the opening, it will be inconsistent. For example, the original temperature is 108 degrees, click on the pop-up box and slide to 110 to send it out, then open the pop-up box and it will be 110 degrees and it will be selected, but if you close the pop-up box and use a device or other mobile phone to change the set temperature to 105 degrees , At this time, when the bullet box is opened again, it is still selected at 110 degrees - a new bug is born again.
This problem was encountered in the era when the project used antd-modile-v2, and I found the imprint left by the class era. Rewritten with useMemo a year later, the principle is similar to this.
result
Now that we have come to the antd-modile-v5 era, the display of the bullet box is controlled by the state. Think about it, the demand is actually to refresh it when the display of the bullet box changes. After careful consideration, the key attribute is enabled, and the value is the state that controls the display and hiding. The purpose is achieved, and the code is still elegant and concise!
// 控制弹框显隐
const [temPickerVisible, setTemPickerVisible] = useState(false)
// bakeTargetTemperature-设备上报的设定温度
<Picker
key={
temPickerVisible}
columns={
...}
visible={
temPickerVisible}
onClose={
() => setTemPickerVisible(false)}
defaultValue={
bakeTargetTemperature}
onConfirm={
async v => {
// 下发设定温度
...
}}
/>