Javascript 对多个子组件使用React pass回调函数

我正在尝试制作一个函数，该函数可以获取其子对象在渲染时的位置，这样它就可以在不重叠的情况下重新渲染它们（它们是绝对定位的）

const ContentWrapper:React.FC=（{article}）=>{
常量[footnotePositions，setFootnotePositions]=useState（[]）；
常量更新位置=（脚注位置）=>{
设置脚注位置（[…脚注位置，脚注位置]）；
}
useffect（（）=>{
//重新定位孩子们…idk该放在哪里还没走到这一步
}，[footnotePositions]）
返回(
{article.map（（x，i）=>(
{x[1]=''？
{x[0]}
&emsp；&emsp；
:
{x[0]}
}
))}
)
}

我可以调试并查看是否正确调用了

updatePositions

函数，但是它没有正确设置状态（我假设是由于setState（）的异步性质）。状态仅设置为在

map（）

函数中渲染的最后一个组件的位置

如何从回调函数调用setState而不重写以前的迭代

我是否需要绑定回调函数（在函数组件中如何工作）

该状态仅设置为最后一个被激活零部件的位置 在

map（）函数中呈现

我认为这表明在循环中排队等待状态更新，并使用基于值的状态更新。也就是说，每个脚印都会被装入并调用
footnotePosition
|
updatePositions
回调及其位置，并覆盖先前排队的状态值

这就是您希望使用功能状态更新的情况。函数状态更新有点像reducer函数，但它只将当前状态作为参数。伪代码如下所示

setMyState(state => state + update)

下面是我的一个演示代码沙盒，帮助说明两种状态更新之间的差异


假设其余的组件逻辑是合理的（我对
文章
和
脚注位置
数组的相关性有一些不确定性），那么我有以下建议：

更新
updatePositions
函数以使用功能状态更新

const updatePositions = (footnotePosition) => {
  setFootnotePositions(positions => [...positions, footnotePosition]);
}

这不是一个很大的改变，但是现在您可以将多个状态更新排队，并且每个更新都将从以前计算的“下一个状态”值进行更新。
非常有效，谢谢。我觉得我少了一个部分，这就是它。
const updatePositions = (footnotePosition) => {
  setFootnotePositions(positions => [...positions, footnotePosition]);
}