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（{}），您必须在其中指定要更新的元素。在这种情况下，如果您使用spread operator，它应该类似于：

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

Answer 2

试试这个：

let editableComparatorIndexes = [...this.state.ids];
   editableComparatorIndexes[i] = 1;
   this.setState({editableComparatorIndexes});

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

2 个答案: