React Native 選擇器選擇的值保留已刪除的項目

Question

在屏幕上，我根據一個值刪除了一個 object，當該項目被刪除並且我想要一個新的 select 時，“selectedValue”道具會保留已刪除項目的值，從而觸發錯誤。

假設我有這個列表：

[{ profit: '2300', month: 'February', year: '2021' },
{ profit: '2600', month: 'January', year: '2021' },
{ profit: '3100', month: 'March', year: '2021' },
{ profit: '1900', month: 'January', year: '2020' },
{ profit: '2400', month: 'April', year: '2021' }]

在其中一個Picker組件上，我顯示了所選年份中的月份。 例如，如果我選擇2021 ，則月份數組應為['January', 'February', 'March', 'April'] 。 然后，我刪除了February的值。 值被刪除，2021 年的數組更改為['January', 'March', 'April'] 。 但是，在Picker “currentItem”上，該值設置為February ，無論該值是否不再位於ItemList上。

這是我的選擇器所在屏幕的代碼：

<ItemPicker
   visible={monthModalVisible} // <- The item picker is a Modal, thus it's not visible until the press of a button
   itemList={userMonths} // <- The array with the months of the selected year
   defaultItem={userMonths[0]}
   onSelectItem={m => {
     setMonthModalVisible(false);
     saveInState({ month: m });
     toggleProfit(m); // <- Function that retrieves the object on the list based on the selected month
     setMonthSelected(m);
   }}
 />

這是我的 ItemPicker 組件代碼：

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(() => {
    setCurrentItem(defaultItem);
  }, [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={() => { setCurrentItem(currentItem); onSelectItem(currentItem); }}
          />
        </View>
      </View>
    </Modal>
  );
}

我想要做的是讓 Picker 組件“忘記”所選擇的值（並刪除，即如果我選擇February並且它的 object 被刪除，那么February不應該是 Picker 的currentItem了）

Answer 1

useEffect掛鈎不起作用。

  useEffect(() => {
    setCurrentItem(defaultItem);
  }, [defaultItem]);

就用這個

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

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


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