[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의 수명주기를 확인할 수 있습니다.
