`setInterval` 내부에서 내 React 상태가 업데이트되지 않는 이유는 무엇입니까?

setInterval 내에서 React State Hook을 사용할 때 상태가 업데이트되지 않음

React의 새로운 Hooks 기능 내에서 Clock 구성 요소는 시간 값을 표시하도록 설계되었습니다. 매초마다 증가합니다. 타이머가 동작함에도 불구하고 시간 값이 1에 정체되어 있습니다.

문제 원인

이 문제의 근본 원인은 setInterval의 클로저에 있습니다. 이 클로저 내의 콜백 함수는 시간 변수의 초기 값에만 액세스할 수 있습니다. useEffect() 함수가 첫 번째 렌더링 이후 실행되지 않으므로 콜백은 후속 시간 값을 수신하지 않습니다.

시간 값 액세스

따라서 시간 변수는 항상 setInterval에 대한 콜백에서 초기값 0을 전달합니다.

해결책: 콜백 사용 상태 후크 형식

전통적인 setState 메서드와 유사하게 상태 후크는 두 가지 옵션을 제공합니다. 첫 번째는 업데이트된 상태를 받아들이고 콜백 양식은 현재 상태를 받습니다. 이 문제를 해결하려면 콜백 양식을 활용하고 setState 콜백 내에서 증가하기 전에 가장 최근 상태 값을 획득하는 것이 좋습니다.

대체 접근 방식

Dan Abramov의 블로그 게시물 후크와 함께 setInterval을 사용하는 방법을 자세히 알아보고 이 문제에 대한 다양한 솔루션을 제시합니다. 꼭 읽어 보시기 바랍니다.

업데이트된 코드

아래 코드는 수정된 구현을 보여줍니다.

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (<div>Seconds: {time}</div>);
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

위 내용은 `setInterval` 내부에서 내 React 상태가 업데이트되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!