javascript - 更新数组 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})

  }

我想要的只是通过特定的索引更新颜色，而不使所有颜色仍然为空变得相同

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});
}