盖茨比中的“无法读取 null 的属性（读取 'appendChild'）”错误仅在站点刷新时显示答案

【问题标题】："Cannot read properties of null (reading 'appendChild')" error in gatsby shows only on site refresh盖茨比中的“无法读取 null 的属性（读取 'appendChild'）”错误仅在站点刷新时显示
【发布时间】：2023-03-14 12:01:01
【问题描述】：

我正在使用 gatsby develop，当我为我的一个组件输入此代码时，它会运行 fin 并创建 div，但是当我刷新页面时，它会显示错误“无法读取 null 的属性（读取 'appendChild'）' 'container.appendChild(circle);'这一行。为什么只有在我刷新页面时才会出现这个问题，我该如何解决这个问题？

const Fun = () => {
    const container = document.getElementById('container');
    let row = 15;
    let col = 15;

    for(let i = 0; i < col; i++){
        for(let j = 0; j < row; j++){
            const circle = document.createElement('div');
            container.appendChild(circle);
        }
    }

    return (
        <div className={funWrapper}>
            <div id={'container'} className={funContainer}/>
        </div>
    )
}

【问题讨论】：

标签： javascript reactjs components gatsby

【解决方案1】：

您正在使用 React（因此使用 Gatsby）创建和操作 virtual DOM (vDOM)，而您的代码正在指向和操作真实的 DOM（因为使用了 document）。

React 不知道其范围之外的更改，反之亦然，因此它永远不会像您所做的那样知道真实 DOM 中的更改。

在您的情况下，因此，容器在您尝试请求它时可能存在也可能不存在（因为刷新）。

您可以利用 useRef hook 在虚拟 DOM 中创建对元素的引用，从而在 React 的范围内创建完全相同的行为。

const Fun = () => {
  const container = useRef(null);

    useEffect(()=>{
      container.current.appendChild('<div>a circle</div>')
    }, [])

   
    return (
        <div className={funWrapper}>
            <div id={'container'} ref={container} className={funContainer}/>
        </div>
    )
}

这个想法是等待 React 的生命周期直到 DOM 树被加载，这就是 useEffect with empty deps ([]) 所做的。您可以尝试在其中添加您以前的内容，但您将破坏我之前提到的 vDOM-DOM 范围，尽管它可能有效。

如您所见，container.current 包含您的<div> 的引用，并保留与document.getElementById 完全相同的信息。

【讨论】：