使用.map()创建多个选择列表时,如何将每个列表的唯一值传递给父组件以将其组合在一起

新功能以响应本机和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;
bendan0663 回答:使用.map()创建多个选择列表时,如何将每个列表的唯一值传递给父组件以将其组合在一起

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3152072.html

大家都在问