React Native选择器选择的值保留一个已删除的项

Question

在屏幕上，我根据一个值删除了一个对象，当项目被删除时，我想选择一个新的，'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，它的对象被删除，那么February不应该是拾取器的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>
);
}