更新数组内的字段对象 javascript

Question

我有一个对象作为数组存储在变量

0 : {option: "E", primary: "primary", color: "#4CAF50"}
1 : {option: "B", primary: "primary", color: "#4CAF50"}
2 : {option: "", color: "", primary: ""}
3 : {option: "", color: "", primary: ""}
4 : {option: "", color: "", primary: ""}
5 : {option: "", color: "", primary: ""}

我的问题是如何在不做任何更改的情况下更新特定的关键对象这是我的代码

handleChange = (index, option) => {

    let navNumber = this.state.navNumber
    navNumber[index] = {
      option:option,
      primary:'primary',
      color:'#4CAF50'
    }

    this.setState({navNumber})

  };

  changeRagu = (index) => { 

    let navNumber = this.state.navNumber    
    navNumber[index] = navNumber[index].color = '#FF9800' 
    this.setState({navNumber})

  }

我只想通过特定的 index 仅更新 color 而不使所有颜色仍然为空变得相同

Answer 1

这个：

let navNumber = this.state.navNumber

不好，因为您正在复制对 navNumber 变量的引用，而不是创建它的副本。因此，您对 navNumber 所做的任何更改基本上都是对 this.state.navNumber 的更改。这意味着您正在直接改变状态！

试试这个：

changeRagu = (index) => { 
  let navNumber = this.state.navNumber.slice();  //make a copy of navNumber    
  let obj = Object.assign({}, navNumber[index]);  //now copy the object at index
  obj.color = '#FF9800'
  navNumber[index] = obj
  this.setState({navNumber});
}

更新数组内的字段对象 javascript

Update field object inside array javascript

javascript

reactjs