javascript - 我无法更改 State 中的数组

Question

我无法在此处正确传递代码。所以我会用图片来解释这个问题。(注意:这些都在同一个组件中)

问题:我有一个状态值:

  state = {
    base: [ {tomato: false}, {egg: true} ],
    contents: [
      {mushroom: false},
      {olive: false},
      {greenPepper: false},
      {sausage: false},
      {tomato: false},
      {redPapper: false}
    ],
    selectBase: "tomato"
  };

---

一共有六个按钮。每个按钮都等于“内容”数组中的一个值。这样:

---

<label>
    <Checkbox checked={this.state.contents.olive} onChange= 
      {this.handleChanges('olive')} color="default" value="olive"/>Olive
</label>
// There are 5 more similar buttons.

---

这个函数在我按下按钮时起作用:

---

  handleChanges = name => event => {
    this.setState({ 
      ...this.state,
      contents: [
        ...this.state.contents,
        {[name]: event.target.checked}
      ]
       });
      console.log(this.state)
  };

---

当我按下按钮时，我希望数组中达到的值发生变化。但是它再次将相同的值添加到数组中。

---

---

我的目标只是改变数组中达到的值。除此之外，它们都需要保持不变。我该怎么做？

---

对于所有代码: https://codepen.io/guldus/pen/MMeZqO?editors=1010

Answer 1

原因是你在handleChanges中添加了一个新对象

handleChanges = name => event => {
  this.setState({
    ...this.state,
    contents: [
      ...this.state.contents,
      {[name]: event.target.checked} <-- Here you add a new object to the contents array 
    ]
  })
}

你需要做的是找到数组中的元素并更新它

handleChanges = name => event => {
  this.setState(prevState => ({
    // here we check if the current obj that we iterate on has the name field in it
    // if it does we replace it with a new object with the name
    // as the key and the new checked value
    contents: prevState.contents
      .map(obj => name in obj ? {[name]: event.target.checked} : obj)
  }))
}