Reach子程序在状态更改时不更新

Question

我创建了一个代码片段来演示这个问题：

https://codesandbox.io/s/o1v4qxw3yy

本质上，当单击复选框时，checkedValues ( is数组)不会传递给ChildComponent。除非我同时发送另一个变量。如果取消对ParentComponent中的cat行@32的注释，它就会开始工作。

我已经注意到，围绕ChildComponent的阿波罗专案接收新的值实时，但是ChildComponent不会更新，除非进行另一个状态更改。

我不知道我做错了什么。

Answer 1

你在改变状态。你应该保持状态不变。创建一个新数组，然后对该数组进行更改。所以转换

let newArray = this.state.checkedValues;

至

let newArray = [...this.state.checkedValues]; 

Answer 2

您需要在父组件的setState()方法的handleChecked()方法中传递一个新的数组，如下所示(可以使用spread操作符)。

handleChecked = (e, id) => {
  console.log(id)
  let newArray = this.state.checkedValues;

  const i = newArray.indexOf(id);
  if (i === -1) newArray.push(id);
  else newArray.splice(i, 1);

  this.setState({ checkedValues: [...newArray] });
  this.setState({ cat: !this.state.cat })
  console.log(`State changed to ${this.state.checkedValues}`);
};