React에서 setState()를 호출한 후 업데이트된 상태 값에 즉시 액세스하려면 어떻게 해야 합니까?

React의 상태 전파 수수께끼

React의 setState() 메서드는 업데이트된 상태 값을 업데이트한 후 즉시 검색하려고 할 때 문제를 제기합니다. 이는 setState()의 비동기 특성 때문입니다.

다음 코드를 고려하세요.

let total = newDealersDeckTotal.reduce((a, b) => a + b, 0);

console.log(total, 'tittal'); // Outputs correct total
setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); // Outputs incorrect total

여기서 문제는 setState() 호출이 비동기적이라는 것입니다. 이는 두 번째 console.log 문이 실행될 때 상태가 아직 업데이트되지 않았음을 의미합니다.

이 문제를 해결하기 위해 콜백 패턴을 사용할 수 있습니다. 여기에는 상태 변경이 완료되면 실행될 콜백 함수를 setState()에 전달하는 작업이 포함됩니다.

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});

이 접근 방식을 사용하면 콘솔 로그 문은 상태가 업데이트된 후에만 실행됩니다. 올바른 값이 표시되는지 확인하세요.

위 내용은 React에서 setState()를 호출한 후 업데이트된 상태 값에 즉시 액세스하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!