更新数组javascript中的字段对象

时间:2017-11-07 08:44:03

标签: javascript reactjs

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

中的数组
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})

  }

我想要的只是通过特定的索引更新颜色,而不会让所有颜色仍然是空的

1 个答案:

答案 0 :(得分:3)

此:

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