NextJS Ref.Current为null

Question

我正在尝试使用USEREF获得DIV的高度，但我遇到了一个错误“ Ref.Current Is Null”。
我从React进口了Useref。

我有关参考的代码：

    const [height, setHeight] = useState(0);
    const ref = useRef(null);

    useEffect(() => {
        artwork && setHeight(ref.current.scrollHeight)
    }, [artwork]);

我将参考文献添加到了我的Div：

    <div
        ref={ref}
        className="some code"
            
    >

我缺少什么？

Answer 1

当使用具有依赖关系的挂钩，例如，例如代码>使用效果。这里的关键是将您的 ref 添加到依赖项列表中，以便在安装组件并创建 div 时再次运行：

function Component({ artwork }) {
    const [height, setHeight] = useState(-1);
    const ref = useRef();
 
    useEffect(() => {
        if(artwork && ref?.current) {
            console.log('setting');
            setHeight(ref.current.scrollHeight);
        }
    }, [artwork, ref]);
    
    return (
        <div ref={ref} className="some code">{height}</div>
    );
}

问题是在您的原始代码， Artwork 是依赖项列表中的唯一项目，这意味着它将在更改 Artwork 时运行。

   ...
}, [artwork]);

我可以在 Height 添加到依赖项列表中，但是在此示例中，我已将其排除在外）

Answer 2

确保检查参考和参考文献不是无效的。

 useEffect(() => {
   if(ref && ref.current) {
      artwork && setHeight(ref.current.scrollHeight)
   }
 }, [artwork]);