반응 null 오류가 보고된 경우 수행할 작업

null 오류 대응 솔루션: 1. 해당 js 파일을 엽니다. 2. 요소가 DOM에 렌더링되었는지 확인합니다. 3. useEffect 후크의 참조에 액세스하거나 이벤트가 트리거될 때 참조에 액세스합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

react null 오류가 보고되면 어떻게 해야 하나요?

React 오류 참조는 정의되지 않음 또는 null을 반환합니다.

해당 DOM 요소가 렌더링되기 전에 해당 DOM 요소의 현재 속성에 액세스하려고 하면 일반적으로 React의 참조는 정의되지 않음 또는 null을 반환합니다. 이 문제를 해결하려면 useEffect 후크에서 참조에 액세스하거나 이벤트가 트리거될 때 참조에 액세스할 수 있습니다.

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 객체의 현재 속성에 액세스해야 한다는 점에 유의해야 합니다.

ref 속성을 요소에 전달하면(예: 11a9c0119a7de7705cd9417a8e6c4780) React는 ref 객체의 .current 속성을 해당 DOM 노드로 설정합니다.

ref가 요소에 설정되었고 요소가 DOM에 렌더링되었는지 확인하기 위해 useEffect 후크를 사용합니다.

구성 요소에서 직접 ref의 현재 속성에 액세스하려고 하면 ref가 아직 설정되지 않았고 div 요소가 아직 렌더링되지 않았기 때문에 정의되지 않은 상태가 됩니다.

Event

이벤트 핸들러 함수에서 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>
  );
}

사용자가 버튼을 클릭하면 ref가 설정되고 해당 요소가 DOM에 렌더링되므로 액세스할 수 있습니다.

요약

useEffect 후크에서 ref에 액세스하거나 이벤트가 트리거될 때 ref에 액세스할 수 있습니다. 즉, 요소가 DOM에 렌더링되었는지 확인하세요.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 null 오류가 보고된 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!