Реагировать на сброс выбора вариантов в зависимости от состояния

Question

У меня есть тег Select, который позволяет пользователю выбирать между 2-7 людьми, у меня также есть событие onChange, где он сохраняет этот номер в состояние.После этого он вызовет функцию updateMenuSelect и отобразит х количество тегов выбора.Проблема в том, что я хочу, чтобы каждый параметр в updateMenuSelect был Meal #X, а не ранее выбранным элементом.

 updateMenuSelect() {
    const menuSelector = [];
    for (let i = 0; i < this.state.personCount; i++) {
      menuSelector.push(
        <div>
          <select onChange={this.addMeal} name={i}>
            <option value={0} selected>
              Meal #{i + 1}
            </option>
            <option value={15}>Cheesy Stuffed BBQ Pork Burgers</option>
            <option value={17}>Tex-Mex Cheese-Stuffed Burgers</option>
            <option value={20}>Fiesta Chicken Tacos</option>
            <option value={24}>Apricot Balsamic-Glazed Pork Tenderloin</option>
            <option value={15}>Lemon Pepper Chicken Linguine</option>
          </select>
        </div>
      );
    }

    return <div>{menuSelector}</div>;
  }

Например, скажем, я выбрал 3 человек, тогда он будет отображать 3 выбора содинаковые варианты в каждом.Если для всех 3 я выберу «Fiesta Chicken Tacos», а затем обновлю количество людей до 6, он отобразит 6 выбранных тегов, но первые 3 все еще содержат «Fiesta Chicken Tacos».Как сделать так, чтобы текст в настройках сбрасывался?У меня есть рабочая песочница реакции реагирует https://codesandbox.io/s/8z20mnkk38

Answer 1

Проблема в том, что существующие опции используются повторно.Это происходит потому, что вы не указываете ключ, который означает, что это новые блоки выбора.

Самый простой подход - добавить key к внешнему div, который зависит от количества блоков выбора ифактический индекс каждого выбора.

, поэтому изменение

menuSelector.push(
    <div>

на

menuSelector.push(
    <div key={`${i}-${this.state.personCount}`}>

решит проблему.

Обновленная демонстрация на https://codesandbox.io/s/q868qyrx16

Answer 2

Если вы поместите выбранную опцию для каждого <select> в состояние, то вы можете сбросить их все в методе changedPersonCount.

Я обновил вашу ссылку в песочнице: https://codesandbox.io/s/6w54qj2y2z

---

Объяснение того, что я изменил

Добавлены выбранные параметры в состояние:

this.state = {
  personCount: 0,
  selectedOptions: {}
};

Реализована функция addMeal (не стесняйтесь изменять ее, чтобы включить любую функцию, которую вы хотелитакже сделать, когда они выбрали опцию)

addMeal = (index, value) => {
    this.setState(prevState => ({
      selectedOptions: { ...prevState.selectedOptions, [index]: value }
    }));
};

Получить выбранное значение для каждого <select> в цикле

...
for (let i = 0; i < this.state.personCount; i++) {
    const selectedValue = this.state.selectedOptions[i] || 0;
...

Измените <select>, чтобы использовать значение из состоянияи вызвать addMeal с параметрами при изменении

<select
    onChange={e => {
      this.addMeal(i, e.target.value);
    }}
    name={i}
    value={selectedValue}
 >

Удален атрибут selected по умолчанию <option>

<option value={0}>Meal #{i + 1}</option>