react null报错怎么办

react null报错的解决办法：1、打开相应的js文件；2、检查元素是否已经渲染到DOM上；3、在useEffect钩子中访问ref，或者当事件触发时再访问ref即可。

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react null报错怎么办？

React报错之ref返回undefined或null

当我们试图在其对应的DOM元素被渲染之前访问其current属性时，React的ref通常会返回undefined或者null。为了解决该问题，可以在useEffect钩子中访问ref，或者当事件触发时再访问ref。

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
    </div>
  );
}

useEffect

useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变的ref对象，ref对象上的current属性被初始化为传递的参数。

我们没有为useRef传递初始值，因此其current属性设置为undefined。如果我们将null传递给钩子，如果立即访问其current属性，将会得到null。

需要注意的是，我们必须访问ref对象上的current属性，以此来访问设置了ref属性的div元素。

当我们为元素传递ref属性时，比如说，

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  const handleClick = () => {
    console.log(ref.current); // ?️ element here
  };
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}