[英]React Native picker selected value keeps a deleted item
On a screen I delete an object based on a value, and when the item gets deleted and I want to select a new one, the 'selectedValue' prop keeps the value of the item that whas deleted, thus triggering an error.在屏幕上,我根据一个值删除了一个 object,当该项目被删除并且我想要一个新的 select 时,“selectedValue”道具会保留已删除项目的值,从而触发错误。
Let's say I have this list:假设我有这个列表:
[{ 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' }]
And on one of the Picker
components I display the months of the year that was selected.在其中一个Picker
组件上,我显示了所选年份中的月份。 For example, if I choose the year 2021
the month array should be ['January', 'February', 'March', 'April']
.例如,如果我选择2021
,则月份数组应为['January', 'February', 'March', 'April']
。 Then, I delete the values for February
.然后,我删除了February
的值。 The values get deleted and the array for 2021 changes to ['January', 'March', 'April']
.值被删除,2021 年的数组更改为['January', 'March', 'April']
。 However, on the Picker
'currentItem', the value is set to February
, no matter if the value is not on the ItemList
anymore.但是,在Picker
“currentItem”上,该值设置为February
,无论该值是否不再位于ItemList
上。
Here's my code of the screen where the Picker is:这是我的选择器所在屏幕的代码:
<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);
}}
/>
And this is my code for the ItemPicker component:这是我的 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>
);
}
What I want to do is make the Picker component "forget" the value that was selected (and deleted, ie If I choose February
and it's object gets deleted, then February
shouldn't be the Picker's currentItem
anymore)我想要做的是让 Picker 组件“忘记”所选择的值(并删除,即如果我选择February
并且它的 object 被删除,那么February
不应该是 Picker 的currentItem
了)
The useEffect
hook is not working. useEffect
挂钩不起作用。
useEffect(() => {
setCurrentItem(defaultItem);
}, [defaultItem]);
Just use this就用这个
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.