当状态改变时，到达的孩子不更新

本文是小编为大家收集整理的关于当状态改变时，到达的孩子不更新的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

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

https://codesandbox.io/s/o1v4qxw3yy

基本上 checkedvalues (ids数组)不会在单击复选框时传递给子组装.除非我和它一起发送另一个变量.如果在Parencomponent中取消注释Cat Line @ 32，则它一切都开始工作.

我已经注意到子组件周围的apollo hoc收到新值 live ，但除非进行另一个状态更改，否则子组件不会更新.

我不确定我做错了什么.

其他推荐答案

您需要在父组件的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}`);
};

本文地址：https://www.itbaoku.cn/post/1938094.html

百度翻译此文有道翻译此文

问题描述

I have created a code snippet to demonstrate the issue:

https://codesandbox.io/s/o1v4qxw3yy

Essentially the checkedValues (an array of ids) does not get passed to the ChildComponent when a checkbox is clicked. Unless I send another variable along with it. If you uncomment the cat line @32 in the ParentComponent, it all starts working.

I have noticed that the Apollo HOC around the ChildComponent receives the new value live, but the ChildComponent does not update unless another state change is made.

I am not sure what I am doing wrong.

其他推荐答案

You need to pass a new array in setState() method in handleChecked() method of Parent Component as shown below (you can use spread operator.)

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

上一篇：在Angular 8中，graphql-tag的Webpack加载器没有加载。

下一篇：更新apollo客户端实例的URI