React中componentDidMount后DOM没有及时准备就绪

Question

React中componentDidMount后DOM没有及时准备就绪

javascriptreactjsdom

6

我在componentDidMount中调用了React中的一个函数，该函数查询DOM，但即使我在componentDidMount之后调用它，DOM仍未及时渲染。

奇怪的是，在webpack中，一切正常，DOM已经被渲染并准备好进行querySelectorAll选择。但是，在构建后，情况就不同了。我已经尝试在多个服务器上运行，但问题始终存在。

我的初步想法是代码的压缩方式可能会导致问题。

我只需要函数运行一次，这就是为什么我将其放置在component did mount中的原因。

- Turan

1

有一些代码可以展示吗？如果你让我们看看，也许我们可以帮你调试它 :) - Kyle Richardson

1

我不确定我能为此添加什么，但我目前正在处理相同的行为 - 我在componentDidMount上有一个动画滚动，它未能正确检索元素的offsetTop。如果我将其包装在setTimeout中，即使是1毫秒 - offsetTop也会被正确计算，因此，实际上，我会说react在componentDidMount中没有完成DOM。 - Stormherz

2个回答

1

componentDidMount 在组件的生命周期中只被调用一次，重新渲染不会重新初始化组件。您是否尝试使用 componentDidUpdate，当组件更新时它会被触发。

- Simon Restrepo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cdauth · Accepted Answer

如此答案所述，componentDidMount在所有子组件被挂载后调用，但在任何父组件被挂载之前调用。

对我来说，通过在componentDidMount中使用setTimeout()（0毫秒延迟）延迟我的代码可以解决问题。