При создании множества списков выбора с помощью .map (), как я могу передать уникальное значение каждого из них родительскому компоненту для объединения вместе - PullRequest
Новая
       8

При создании множества списков выбора с помощью .map (), как я могу передать уникальное значение каждого из них родительскому компоненту для объединения вместе

0 голосов
/ 06 ноября 2019

новенький, чтобы реагировать на родной и редукционный, и не знаю, как мне решить эту проблему. В основном я пытаюсь создать приложение доставки еды, как Uber ест. Теперь, когда пользователь выбирает конкретную еду, ему может потребоваться выбрать несколько дополнений для еды, используя список выбора. Я использовал .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})`,
      name: item.option,
      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;
...