[javascript] 상태를 업데이트하지 않는 React setState

그래서 나는 이것을 가지고 있습니다.

let total = newDealersDeckTotal.reduce(function(a, b) {
  return 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

newDealersDeckTotal은 숫자의 배열 일뿐입니다. [1, 5, 9]예를 들어 this.state.dealersOverallTotal정확한 합계를 제공하지는 않지만 그렇 total습니까? 이것이 문제가 해결되었는지 확인하기 위해 시간 초과 지연을 설정했습니다. 명백한 것이 있습니까 아니면 더 많은 코드를 게시해야합니까?



답변

setState()일반적으로 비동기식입니다. 즉 console.log, 상태가 아직 업데이트되지 않은 상태입니다. setState()메소드 의 콜백에 로그를 넣으십시오 . 상태 변경이 완료된 후에 실행됩니다.

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


답변

setState는 비동기입니다. 콜백 메서드를 사용하여 업데이트 된 상태를 가져올 수 있습니다.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () =>
    console.log(this.state.yourName));
 }


답변

async / await 사용

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}


답변

setState()작업은 비동기 따라서 당신은 console.log()전과 실행됩니다 setState()변이 값을 따라서 당신은 결과를 참조하십시오.

이를 해결하려면 setState()다음과 같이 의 콜백 함수에 값을 기록하십시오 .

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


답변

후크의 경우 후크를 사용해야합니다 useEffect.

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])


답변

setstate는 반응에서 비동기식이므로 콘솔에서 업데이트 된 상태를 보려면 아래와 같이 콜백을 사용하십시오 (콜백 함수는 setstate 업데이트 후 실행됩니다).

여기에 이미지 설명 입력

아래 방법은 “권장되지 않음”이지만 이해를 돕기 위해 상태를 직접 변경하면 다음 줄에서 업데이트 된 상태를 볼 수 있습니다. 나는 이것을 “권장하지 않음”을 반복한다

여기에 이미지 설명 입력


답변

componentDidUpdate(){}코드 에 메서드를 추가 하기 만하면 작동합니다. 여기서 React Native의 수명주기를 확인할 수 있습니다.

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8