Question

我有一个关于 react js 的问题。

我有一个场景，我们在父组件中有一个状态。它必须由子组件更新。这样，基于状态值，我将在父组件中做一些其他的事情。

但是，如果我渲染多个子组件，父组件的状态只会更新一次。

能否请您帮助我理解为什么状态只更新一次以及可能的解决方法是什么。

下面是示例的代码沙盒链接。

https://codesandbox.io/s/heuristic-cori-8793u?file=/src/App.js

谢谢。

Answer 1

参考文档：

<块引用>

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。

doc Link。
因此，您不能在 ngOnInit(): void { this.dateSubject.subscribe( subjectDateValues => { this.chartCategories = []; this.setNewDates(); this.calculateCategoryAxisUnit(); this.chartOptions.xaxis.categories = this.chartCategories; this.chart.updateOptions(this.chartOptions) console.log("xaxis categories: " + this.chart.xaxis.categories); }) } ngOnChanges(){ this.dateRange = new DateRange(this.startDate,this.endDate); this.dateSubject.next(this.dateRange); } 之类的 setState() 中传递旧状态。因为 React 会在重新渲染期间“更改”您的 setCount(count + 1); 值，在您的情况下，您在 React 有时间再次渲染之前多次调用 count。
这也是您的 setCount() 显示先前值的原因。一种解决方案是这种语法 console.log(count)。
试试这个：

setState(prevState=> prevState+1)

codeSanBox

Answer 2

问题是由于 updateCounter 已经关闭了 count 的值，所以当你用两个子组件调用它两次时，count 的“旧”值是两次都用过。您可以通过使用 useState 的“更新”形式来避免它。这确保您将增加 count 的“当前”值：

const updateCounter = (num) => {
  setCount(c => c + 1);
  console.log(count);
};

从多个子组件更新父组件状态而不考虑更新的状态值

2 个答案: