Javascript 反应选择映射问题

我在我的项目中使用它，我在

地图中使用它，就像这样：

renderItems() {
  this.props.items.map(item => (
    <Select
      id="options"
      value={this.state.optionSelected}
      onChange={this.onChangeOption}
      options={this.showOptions()}
    />
  );
}

如何调整它以仅更改我希望更改的选项

感谢您对所有选定组件使用相同的更改处理程序，然后为所有选定组件设置相同的状态值。为了解决这个问题，您需要使用一个容器组件来分离您的select组件，该容器组件处理它们自己的状态和更改事件，或者您需要为每个select组件指定一个唯一的状态值

示例

renderItems() {
  this.props.items.map(item => (
    <Select
      id="options"
      value={this.state.optionSelected[item.id]}
      onChange={(event) => this.onChangeOption(event, item.id)}
      options={this.showOptions()}
    />
  );
}

onChangeOption(event, itemId) {
  this.setState((prevState) => { 
    const prevStateClone = Object.assign({}, prevState);
    prevStateClone.optionSelected[itemId] = event.target.value;
    return prevStateClone;
  });
}

renderItems（）{
this.props.items.map（item=>(
this.onChangeOption（事件，item.id）}
选项={this.showOptions（）}
/>
);
}
onChangeOption（事件，itemId）{
this.setState（（prevState）=>{
const prevStateClone=Object.assign（{}，prevState）；
prevStateClone.optionSelected[itemId]=event.target.value；
返回克隆；
});
}
尝试，或者如果此
选项Selected
是一个类，您可以实现一个构造函数，为您的同类克隆它：

export class optionSelectedClass {
    myfield = '';

    constructor(fields){
        this.myField = fields.myField;
    }
}

甚至

export class optionSelectedClass {
    myfield = '';

    constructor(fields){
        for (let f in fields) {
            if (!this[f]) {
                this[f] = fields[f];
            }
        }
    }
}

不要将
选项设为selected
字符串变量，而是将其设为处于状态的数组。
现在执行以下操作

renderItems() {
  this.props.items.map(item, index => (
    <Select
      id="options"
      value={this.state.optionSelected[index]}
      onChange={(selectedValue) => this.onChangeOption(selectedValue, index)}
      options={this.showOptions()}
    />
  );
}

onChangeOption(selectedValue, index) {
  const optionSelected = this.state.optionSelected.slice() // slicing to get new copy of optionSelected instead of referencing to old one which causes mutation 
  optionSelected[index] = selectedValue
  this.setState({optionSelected: optionSelected})
}

renderItems（）{
this.props.items.map（项目，索引=>(
this.onChangeOption（selectedValue，index）}
选项={this.showOptions（）}
/>
);
}
onchange选项（selectedValue，index）{
const optionSelected=this.state.optionSelected.slice（）//切片以获取optionSelected的新副本，而不是引用导致变异的旧副本
选项Selected[索引]=selectedValue
this.setState（{optionSelected:optionSelected}）
}

您所做的是使用单个变量来保存选择框的值。因此，如果有人更改，它将反映所有选择框
它更改了所有内容，因为它们都依赖于单个变量。这没关系……但我如何解决它呢？如果每个项目都有唯一的标识符，请使每个变量都依赖于不同的变量（例如id）您可以更新特定项目的状态，而不是所有项目的状态。由于该项目是动态的，您能否回答显示该项目示例的问题？
renderItems() {
  this.props.items.map(item, index => (
    <Select
      id="options"
      value={this.state.optionSelected[index]}
      onChange={(selectedValue) => this.onChangeOption(selectedValue, index)}
      options={this.showOptions()}
    />
  );
}

onChangeOption(selectedValue, index) {
  const optionSelected = this.state.optionSelected.slice() // slicing to get new copy of optionSelected instead of referencing to old one which causes mutation 
  optionSelected[index] = selectedValue
  this.setState({optionSelected: optionSelected})
}