React Native Picker selectedValue保留已删除选项导致报错如何解决

问题根因 #

当前你的CustomDatePicker组件仅监听了defaultItem的变化更新内部选中状态currentItem，当可选列表itemList发生变化（比如删除对应月份数据后列表项减少）时，没有校验当前currentItem是否还在可选列表范围内，因此会残留已删除的无效值触发报错。

修复方案 #

修改CustomDatePicker的副作用监听逻辑，把itemList加入依赖数组，每次可选列表更新时自动校验选中值有效性，无效则重置为合法 fallback 值：

import { Picker } from '@react-native-community/picker';

export default function CustomDatePicker(props) {
  const {
    visible,
    itemList,
    defaultItem,
    btnText,
    onSelectItem
  } = props;
  const [currentItem, setCurrentItem] = useState(defaultItem);
  const { shadow, flexCenter, modal, button, picker } = styles;

  useEffect(() => {
    // 校验当前选中值是否还在可选列表中
    const isValueValid = itemList.includes(currentItem);
    if (isValueValid) return;
    // 无效则取 fallback 值：优先用defaultItem，defaultItem也无效就取列表第一个元素，列表为空设为null
    const fallbackItem = itemList.includes(defaultItem) ? defaultItem : itemList[0] ?? null;
    setCurrentItem(fallbackItem);
    // 可选：如果需要同步父组件存储的选中状态，这里可以调用onSelectItem通知更新
    // fallbackItem && onSelectItem(fallbackItem)
  }, [defaultItem, itemList, currentItem, onSelectItem]);

  // 可选优化：Modal打开时再校验一次，避免特殊场景下的状态异常
  useEffect(() => {
    if (visible && !itemList.includes(currentItem)) {
      const fallbackItem = itemList.includes(defaultItem) ? defaultItem : itemList[0] ?? null;
      setCurrentItem(fallbackItem);
    }
  }, [visible, itemList, currentItem, defaultItem])

  return (
    <Modal
      animationType="slide"
      transparent
      visible={visible}
    >
      <View style={flexCenter}>
        <View style={[shadow, modal]}>
          <Picker
            selectedValue={currentItem}
            onValueChange={value => setCurrentItem(value)}
            style={picker}
          >
            {itemList.map(item => (
              <Picker.Item value={item} label={item} key={item} />
            ))}
          </Picker>
          <Button
            text={btnText}
            style={button}
            onPress={() => { onSelectItem(currentItem); }}
          />
        </View>
      </View>
    </Modal>
  );
}

注：原代码中按钮点击事件里的setCurrentItem(currentItem)是无意义的重复赋值，已直接删除。

修改完成后，只要可选列表itemList发生变化（比如删除February后列表移除对应项），组件会自动检测到选中值无效，自动重置为合法的可选值，不会再残留无效值触发报错。

内容的提问来源于stack exchange，提问作者Daniel Corona