父状态更改后，React 子项未更新

Question

我设法根据内容高度动态添加 React 元素 Add React elements dynamically depending on the content height

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

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

然而，我知道的问题是显示实际文章的子组件没有对其父组件的更新状态做出反应。只需点击 Article 2 按钮即可进行测试。

是否与引用的用法有关？我不知道发生了什么。

Answer 1

这是因为 Article 组件有自己的状态。您在 html 中传递的 const [article, setArticle] = React.useState(parse(html)); 道具是初始值，当道具更改时它会被忽略。

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

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