新功能以响应本机和redux,并且不确定如何解决该问题。 基本上,我正在尝试创建像Uber eats这样的送餐应用程序。现在,当用户选择特定餐点时,他们可能需要使用选择列表为餐点选择多个附加项。我使用.map()为每个添加项创建了一个选择列表(例如,我们可能有一个侧面和一个饮料选择列表。侧面:[薯条,沙拉],饮料:[可乐,百事可乐])
我遇到麻烦的地方是将每个选择列表的当前值传递给父组件,以便用户选择可以与其他数据组合,然后添加到他们的购物车中。对我来说,最好的方法是什么?我真的很努力,任何帮助将不胜感激!
这是我的应用程序的当前设置:
膳食成分(父)
const Meal = props => {
const meal = props.navigation.getParam("meal");
const cartItems = useSelector(state => state.cartItems);
const addOns = () => {
if (!meal.addOns) {
return;
} else {
return meal.addOns.map((addOn,index) => {
const isrequired = () => {
if (addOn.isrequired) {
return (
<CustomTextBold
text={`${addOn.type} (required)`}
style={{ paddingVertical: 5 }}
/>
);
} else {
return (
<CustomTextBold
text={addOn.type}
style={{ paddingVertical: 5 }}
/>
);
}
};
return (
<View key={index} style={styles.pickerContainer}>
{isrequired()}
<AddOnPicker items={addOn.options} type={addOn.type} />
</View>
);
});
}
};
const price = meal.price * quantity;
return (
<ScrollView>
{addOns()}
</ScrollView>
);
};
export default Meal;
选择列表组件(子级)
const AddOnPicker = props => {
const addOnItems = [];
const pushItems = () => {
props.items.forEach(item => {
if (item.cost === 0) {
addOnItems.push({
label: item.option,value: item.option,name: item.option,price: item.cost
});
} else {
addOnItems.push({
label: item.option + " " + ` (+N$${item.cost})`,value: item.option + " " + ` (+N$${item.cost})`,price: item.cost
});
}
});
};
pushItems();
const dispatch = useDispatch();
const handlePickerValue = value => {
const item = addOnItems.find(item => item.label === value);
dispatch(setItems(item));
};
return (
<RNPickerSelect
placeholder={placeholder}
style={pickerSelectStyles} // value={pickerValue}
onValueChange={value => {
handlePickerValue(value);
}}
items={addOnItems}
/>
);
};
export default AddOnPicker;