입력 할 때 OnChange에서 OnChange 이벤트가 여러 번 반응하는 이유는 무엇입니까?

Onchange 이벤트는 React에서 여러 번 트리거합니다. 심도있는 토론

React Development에서 입력 상자의 onChange 이벤트는 때때로 실수로 여러 번 트리거됩니다. 이 기사는이 문제를 심층적으로 분석하고 해결책을 제공합니다.

문제 설명

useState 후크를 사용하여 상태를 관리하고 입력 상자의 onChange 이벤트에서 상태를 업데이트하고 인쇄하는 간단한 반응 구성 요소. 그러나 캐릭터에 들어갈 때 콘솔은 두 번 인쇄합니다. 이 현상은 객체 유형 상태를 사용할 때 특히 명백하지만 원시 유형 상태를 사용할 때는 발생하지 않습니다.

샘플 코드 스 니펫 (문제 코드) :

 import React, {usestate} "React";

내보내기 기본 기능 child () {
  const [state, setstate] = usestate ({});

  const onchange = (이벤트) => {
    setstate ({... state, value : event.target.value});
    Console.log ( "Onchange Triggered", state);
  };

  반품 (
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  );
}

문제 분석

이 문제의 근본은 React의 엄격한 모드에 있습니다. 개발 환경에서 Strict Mode는 두 가지 렌더링을 수행하여 개발자가 불필요한 부작용과 같은 잠재적 문제를 발견 할 수 있도록 도와줍니다.

상태가 객체 유형 인 경우 setState 값 자체가 아니라 객체에 대한 참조를 업데이트합니다. 엄격한 모드의 이중 렌더링으로 인해 onChange 이벤트가 두 번 호출됩니다. 원래 유형 상태 (예 : 문자열, 숫자)는 값을 직접 업데이트 하므로이 문제는 발생하지 않습니다.

근본 원인

• 객체 유형 상태의 참조 업데이트 : 객체를 상태로 사용하면 setState 새 개체를 만들지 만 console.log onChange 함수 내부는 React의 비동기 업데이트 메커니즘으로 인해 기존 상태를 인쇄합니다. 상태는 두 번째 렌더링 중에 만 새 값으로 업데이트됩니다.
• 엄격한 모드의 이중 렌더링 : 개발 환경에서 엄격한 모드는 듀얼 렌더링을 유발 하여이 문제를 악화시킵니다.

해결책

객체 유형 상태를 사용하지 않거나 setState 의 통화 메소드를 최적화하십시오.

방법 1 : 원래 유형 상태를 사용하십시오

상태를 문자열과 같은 원래 유형으로 변경하십시오.

 import React, {usestate} "React";

내보내기 기본 기능 child () {
  const [inputValue, setInputValue] = usestate ( "");

  const onchange = (이벤트) => {
    setInputValue (event.target.value);
    Console.log ( "Onchange 트리거", inputValue);
  };

  반품 (
    <div>
      <input type="text" value="{inputValue}" onchange="{onChange}">
    </div>
  );
}

방법 2 : 기능적 업데이트를 사용하십시오

기능적 업데이트를 setState 사용하여 각 업데이트가 최신 상태를 기반으로합니다.

 import React, {usestate} "React";

내보내기 기본 기능 child () {
  const [state, setstate] = usestate ({});

  const onchange = (이벤트) => {
    setState ((prevstate) => ({... prevstate, value : event.target.value});
    Console.log ( "Onchange Triggered", state);
  };

  반품 (
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  );
}

위의 방법을 통해 React에서 여러 번 트리거되는 onChange 이벤트 문제를 효과적으로 해결할 수 있습니다. 생산 환경에서 엄격한 모드가 비활성화 되므로이 문제는 일반적으로 개발 환경에서만 발생합니다.

위 내용은 입력 할 때 OnChange에서 OnChange 이벤트가 여러 번 반응하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!