在 useEffect Hook 中选择一个 DOM 元素答案

【问题标题】：Selecting a DOM element inside of a useEffect Hook在 useEffect Hook 中选择一个 DOM 元素
【发布时间】：2021-09-20 20:14:29
【问题描述】：

我正在尝试选择一个位于我使用 useRef 钩子选择的 DOM 中另一个元素内的元素。

const editorRef = useRef(null);

在 useEffect 挂钩中，我尝试选择 editorRef 上的子元素

useEffect(() => {
   editorRef.current.querySelector(".ql-editor").innerHTML = post.content; 
}, []);

但我得到了一个

TypeError：“无法设置属性 'innerHTML' of null”

但是当我在第一次刷新后保存我的代码时，它实际上可以工作并且 innerHTML 被填充。

【问题讨论】：

【解决方案1】：

useEffect Hook 在创建 DOM 之前调用您传递给其依赖项的函数。
因此，由于没有 DOM，因此将没有要选择的元素，这会导致未定义的错误。

还有一个叫做useLayoutEffect的钩子会在DOM创建后调用这个函数

 useLayoutEffect(() => {
   editorRef.current.querySelector(".ql-editor").innerHTML = post.content; 
}, []);

在Here阅读更多关于useLayoutEffect的信息

【讨论】：