내 React setInterval 업데이트 상태가 올바르지 않은 이유는 무엇입니까?

React State Hook 및 setInterval: 자세히 살펴보기

setInterval 내에서 React 상태 후크를 활용할 때 일반적인 주의 사항을 해결하는 것이 중요합니다. . 경우에 따라 초기 렌더링 이후 상태가 예상대로 업데이트되지 않을 수 있습니다.

문제 이해

문제의 핵심은 캡처된 클로저에 있습니다. setInterval. setInterval에 제공된 콜백 함수는 렌더링 시 초기 상태 값에 액세스할 수 있습니다. 그러나 후속 렌더링에서는 useEffect()를 호출하지 않으므로 콜백 함수에 오래된 상태 값이 남게 됩니다. 이로 인해 setInterval 콜백 내에서 시간이 0으로 유지됩니다.

해결책: 상태 콜백 양식 활용

이 문제를 해결하려면 두 번째 형태의 상태를 사용하십시오. 콜백을 받아들이는 후크. 이 콜백은 현재 상태를 인수로 받습니다. 이 양식을 활용하면 값을 증가시키기 전에 가장 최근 상태 값에 액세스할 수 있습니다.

setTime(prevTime => prevTime + 1); // Corrected version

추가 정보

자세한 내용은 Dan Abramov의 통찰력 있는 블로그를 참조하세요. post는 이 문제를 해결하기 위한 대안적인 접근 방식을 제공합니다. 더 깊은 이해를 위해 자세히 살펴보는 것이 좋습니다.

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