「react null」エラーが報告された場合の対処方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2023-01-19 14:43:34

オリジナル

1410 人が閲覧しました

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

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

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

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

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

レンダリングされる前に対応する DOM 要素の現在のプロパティにアクセスしようとすると、React の ref は通常、次の値を返します未定義または null。この問題を解決するには、useEffect フックで ref にアクセスするか、イベントがトリガーされたときに ref にアクセスします。

import {useRef, useEffect} from &#39;react&#39;;
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 属性にアクセスする必要があることに注意してください。

たとえば、

のように ref 属性を要素に渡すと、React は ref オブジェクトの .current プロパティを対応する DOM ノードに設定します。

useEffect フックを使用するのは、要素に参照が設定されていることと、要素が DOM にレンダリングされていることを確認するためです。

コンポーネント内の ref の現在のプロパティに直接アクセスしようとすると、ref がまだ設定されておらず、div 要素がレンダリングされていないため、unknown が返されます。

Event

イベントハンドラー関数で ref の現在のプロパティにアクセスすることもできます。

import {useRef, useEffect} from &#39;react&#39;;
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>
  );
}

ログイン後にコピー

ユーザーがボタンをクリックすると、ref が設定され、対応する要素が DOM にレンダリングされるので、それにアクセスできるようになります。

概要

useEffect フックで ref にアクセスすることも、イベントがトリガーされたときに ref にアクセスすることもできます。言い換えれば、要素が DOM にレンダリングされていることを確認してください。

推奨される学習: 「react ビデオチュートリアル」

以上が「react null」エラーが報告された場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。