React 将回调函数传递给多个子组件

Question

我正在尝试制作一个可以获取其子项在渲染中的位置的函数，以便它可以重新渲染它们而不会重叠（它们是绝对定位的）。

const ContentWrapper: React.FC<{article: Article.article.article}> = ({ article }) => {
  const [footnotePositions, setFootnotePositions] = useState<Number[]>([]);

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

  useEffect(() => {
    // re position children... idk where to put this haven't gotten this far
  }, [footnotePositions])



  return (
    <>
      {article.map( (x, i) => (
        <span key={i}>
          { x[1]==='' ?
          <Line>{x[0]}<br/>&emsp;&emsp;</Line>
          :
          <>
            <Line>{x[0]}</Line>
            <FootnoteRef footnotePosition={updatePositions} />
            <Citation footnote={x[1]}/>
          </>
          }
        </span>
      ))}
    </>
  )
}

我可以调试并看到 updatePositions 函数被正确调用，但是它没有正确设置状态（我假设是因为 setState() 的异步性质）。状态仅设置为 map() 函数中呈现的最后一个组件的位置。

如何在不覆盖之前迭代的情况下从回调函数调用 setState？

是否需要绑定回调函数（在函数式组件中如何实现）？

Answer 1

The state is only set with the position of the last component that is rendered in the map() function.

我认为这表明在循环中排队状态更新并使用 value-based 状态更新。 IE。每个脚注都已安装并使用其位置调用 footnotePosition|updatePositions 回调并覆盖先前的排队状态值。

这是您要使用功能状态更新的情况。功能状态更新 有点像 reducer 函数，但它只将当前状态作为参数。伪代码看起来像这样

setMyState(state => state + update)

这是我的一个 Demo Codesandbox，可以帮助说明两种状态更新之间的区别。

假设您的其余组件逻辑是合理的（我对 article 和 footnotePositions 数组 的相关性有一些不确定性，那么我有以下建议：

更新您的 updatePositions 功能以使用功能状态更新。

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

变化不大，但现在您可以对多个状态更新进行排队，每次更新都将从之前计算的“下一个状态”值进行更新。

React 将回调函数传递给多个子组件

React pass callback function to multiple child components

javascript

callback

setstate

reactjs