javascript - 父状态更改后反应子不更新

Question

我已经设法根据内容高度动态添加 React 元素 根据内容高度动态添加 React 元素

我准备了一个代码框来展示这一点：

https://codesandbox.io/s/html-react-parser-forked-8pl3b

但是，我正确知道的问题是显示实际文章的子组件没有对其父级的状态更新做出反应。这可以通过单击Article 2按钮进行测试。

它与参考的使用有关吗？我无法弄清楚发生了什么。

Answer 1

这是因为Article组件有自己的状态。html你传入的propconst [article, setArticle] = React.useState(parse(html));是初始值，当 prop 改变时会被忽略。

您可以使用 useEffect 挂钩在道具更改时更新状态。您还需要重置didInsertAds状态：

React.useEffect(() => {
  setArticle(parse(html));
  setDidInsertAds(false);
}, [html]);