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

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 组件有自己的状态。你传入const [article, setArticle] = React.useState(parse(html)); 的html 属性是初始值，当属性改变时会被忽略。

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

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