根据状态的不同，响应重置选择选项

Question

我有一个Select，它允许用户选择2-7个人，我也有一个onChange事件，它将这个号码保存到状态。在此之后，它将调用updateMenuSelect函数并呈现x数量的选择标记。问题是，我希望updateMenuSelect中的每个选项都是正餐#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个相同选项的选项。如果对所有三个，我选择“嘉年华鸡Tacos”，然后我更新的人数为6，它将呈现6个选择标签，但与前3仍然有“嘉年华鸡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>