多个子项没有将状态传递回上下文(只有最后一个元素传递)

Question

https://codesandbox.io/s/purple-violet-ci3vdv?file=/src/App.js

我想要一种方法来记录所有子元素的状态，所以我尝试使用上下文提供程序来存储这些信息。

上下文提供程序，并向其使用者公开其setState函数。然后我在子道具的useEffect中更新上下文的状态。

但你会在上面的链接上看到，在第一次渲染时，上下文的状态只显示一个项目(最后一个(，但当单击任何按钮时，单击的消费者的状态将更新为上下文状态？

我的目标是让所有对象在第一次渲染后显示在页面上。

在上面的代码中显示最简单的工作示例更容易。

编辑：为了让它发挥作用，尝试了很多方法——应该使用像Recoil这样的东西来让它发挥预期的作用吗？

Answer 1

尝试在mergeState:中使用此

setDrags((ps) => ({ ...ps, ...childState }));

如果你连续由多个组件调用mergeState，当一个组件更新状态，然后另一个组件也调用它时，你之前传播的drags还没有更新，所以你需要setState中的更新器函数，它会给你以前的状态。

Answer 2

https://codesandbox.io/s/trusting-golick-5ysrbx?file=/src/App.js:516-581

setDrags((_drags) => {
return { ...drags, ...childState };
});