React setState não atualizando estado

Então, eu tenho isso:

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 é apenas uma matriz de números, [1, 5, 9]por exemplo this.state.dealersOverallTotal, não fornece o total correto, mas totalfornece? Até coloquei um tempo limite para ver se isso resolveu o problema. algum óbvio ou devo postar mais código?

setState()geralmente é assíncrono, o que significa que no momento em que você console.logo estado, ele ainda não está atualizado. Tente colocar o log no retorno de chamada do setState()método. É executado após a conclusão da mudança de estado:

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

setState é assíncrono. Você pode usar o método de retorno de chamada para obter o estado atualizado.

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

Usando async / await

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

A setState()operação é assíncrona e, portanto, você console.log()será executado antes de setState()alterar os valores e, portanto, você verá o resultado.

Para resolver isso, registre o valor na função de retorno de chamada de setState(), como:

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

No caso de ganchos, você deve usar useEffectgancho.

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

setFruit('Apple');

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

O setstate é assíncrono na reação, portanto, para ver o estado atualizado no console, use o retorno de chamada conforme mostrado abaixo (a função de retorno de chamada será executada após a atualização do setstate)

O método abaixo "não é recomendado", mas para compreensão, se você alterar o estado diretamente, poderá ver o estado atualizado na próxima linha. Repito que isso é "não recomendado"

apenas adicione o componentDidUpdate(){}método em seu código e ele funcionará. você pode verificar o ciclo de vida do nativo de reação aqui:

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

Eu tive a mesma situação com alguns códigos complicados e nada das sugestões existentes funcionou para mim.

Meu problema era que setStateestava acontecendo a partir da função callback, emitida por um dos componentes. E minha suspeita é que a chamada estava ocorrendo de forma síncrona, o que impedia setStatede configurar o estado de forma alguma.

Simplificando, eu tenho algo assim:

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

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

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

A maneira que eu tinha de "correção" que era para colocar doUpdate()em setTimeoutcomo este:

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

Não é o ideal, mas de outra forma seria uma refatoração significativa.

Tive um problema ao definir o estado de reação várias vezes (sempre usava o estado padrão). Seguir este problema de reação / github funcionou para mim

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

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