내 React `setInterval` 후크가 상태를 제대로 업데이트하지 못하는 이유는 무엇입니까?

React의 setInterval 후크 내 상태 트랩

setInterval 내에서 React의 useState 후크를 활용할 때 잠재적인 문제인 상태 업데이트를 인식하는 것이 중요합니다. 예상대로 반영되지 않을 수 있습니다.

제공된 코드 예제에서는 1초마다 시간 상태가 0으로 유지됩니다. 이는 setInterval 내의 콜백이 초기 시간 값에 묶여 있고 후속 상태 업데이트에 대한 액세스가 부족하기 때문입니다.

해결책: useState 콜백 양식 사용

이 문제를 해결하려면 useState의 콜백 형식을 활용하세요. 이를 통해 콜백은 업데이트하기 전에 현재 상태 값에 액세스할 수 있습니다.

setTime(prevTime => prevTime + 1); // Updates based on current state

구현 업데이트:

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

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

보너스: 대체 접근 방식

후크를 사용하여 setInterval을 처리하는 방법에 대한 자세한 내용은 다음을 참조하세요. ref 또는 useReducer 후크 사용과 같은 대체 방법을 탐색하는 Dan Abramov의 블로그 게시물.

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