状态更改时，Reach child不会更新

Question

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

https://codesandbox.io/s/o1v4qxw3yy

当单击一个复选框时，基本上 checkedValues （一个id数组）不会传递给ChildComponent。除非我发送另一个变量。如果取消注释ParentComponent中的cat行@ 32，它将全部开始工作。

我注意到ChildComponent周围的Apollo HOC收到新值 live ，但是除非进行了其他状态更改，否则ChildComponent不会更新。

我不确定我做错了什么。

Answer 1

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

disown -h "$rsync_pid"

到

let newArray = this.state.checkedValues;

Answer 2

您需要在Parent Component的handleChecked（）方法中的setState（）方法中传递一个新数组，如下所示（您可以使用扩展运算符。）

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