「react null」エラーが報告された場合の対処方法

React null エラーの解決策: 1. 対応する js ファイルを開きます; 2. 要素が DOM にレンダリングされているかどうかを確認します; 3. useEffect フック内の ref にアクセスするか、イベントが発生したときに ref にアクセスしますトリガーされます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で null エラーが発生した場合はどうすればよいですか?

React のエラー ref は未定義または null を返します

レンダリングされる前に対応する DOM 要素の現在のプロパティにアクセスしようとすると、React の ref は通常、次の値を返します未定義または 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 オブジェクトの現在のプロパティは渡されたパラメーターに初期化されます。

useRef の初期値を渡さなかったため、現在のプロパティは未定義に設定されています。 null をフックに渡すと、その現在のプロパティにすぐにアクセスすると null が返されます。

ref 属性が設定された div 要素にアクセスするには、ref オブジェクトの current 属性にアクセスする必要があることに注意してください。

たとえば、

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>
  );
}