盖茨比中的"Cannot read properties of null (reading 'appendChild')"错误仅在网站刷新时显示

Question

我正在使用盖茨比开发，当我为我的一个组件输入此代码时，它运行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>
)
}

Answer 1

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

React不知道它作用域之外的变化，反之亦然，所以它永远不会知道真正DOM中的变化，就像你正在做的那样。

在你的情况下，因为这个原因，容器可能在你试图请求它的时候存在，也可能不存在(因为刷新)。

你可以利用useRef钩子在虚拟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与空深度([])做什么。您可以尝试在其中添加您的previous，但您将打破我之前提到的vDOM-DOM作用域，尽管它可能工作。

可以看到，container.current包含了<div>的引用，并且保持了与document.getElementById完全相同的信息。