更新数组状态 reactJS 中的属性对象

Question

我的状态中有一个名为object的数组 Object 所以我在父组件中的状态对象中有类似的东西：

object:[{id:1, name:"name"},{id:2, name:"name2"}];

我在子组件中为数组中的每个对象都有一个选择框，并且选择打印有this.props.object.map由道具传递，例如：

var elements = this.state.object.map(function(element, k){
        return (

        <Components object={this.state.object} element={element} setPropertyElement={this.setPropertyElement} />         

        )
      }, this);

在子组件中，我选择了更改功能，例如：

<select className="form-control" ref="name" defaultValue="j" onChange={this.change}>
   <option value="j">j</option>
   <option value="x">x</option>
</select>

所以在这种情况下，我在我的页面 2 中看到了与更改名称相关的选择的元素。我有我的功能改变。

change(event){
   this.props.setPropertyElement(this.props.element, event.target.value);
}

在我的父元素中，我有一个函数setPropertyElement：

setPropertyElement(element, value){

      element.name = value;
  }

我的问题是：我的操作是正确的还是我以错误的方式修改状态对象？在这种情况下，如何正确更改数组中属性对象的值？

Answer 1

你是在正确的方向。正如您已经说过的，要更改状态，请调用 setState({})，您必须在其中指定要更新的元素。在这种情况下，如果您使用扩展运算符，它应该类似于：

this.setState({object: [
     ...this.state.object.filter(x => element.ID !== x.ID),
     { id: element.id, name: element.name }
]})