상태를 업데이트하지 않는 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

반응 상태를 여러 번 설정할 때 문제가 발생했습니다 (항상 기본 상태 사용). 이 반응 / github 문제에 따라 저에게 효과적 이었습니다.

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

나는 복잡한 코드로 같은 상황을 겪었고 기존 제안에서 아무것도 효과가 없었습니다.

내 문제는 setState구성 요소 중 하나에서 발행 한 콜백 func에서 발생했습니다. 그리고 내 의심스러운 것은 호출이 동기식으로 발생하여 setState상태를 전혀 설정 하지 못했다 는 것입니다.

간단히 말해서 다음과 같은 것이 있습니다.

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

내가 그것을 "고쳐야"하는 방법은 doUpdate()다음 setTimeout과 같이 넣는 것이었다 .

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

이상적이지는 않지만 그렇지 않으면 상당한 리팩토링이 될 것입니다.