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

newDealerDeckTotal - это просто массив чисел, [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

У меня была такая же ситуация с запутанным кодом, и ничто из существующих предложений не помогло мне.

Моя проблема заключалась в том, что setStateэто происходило из функции обратного вызова, выпущенной одним из компонентов. И меня подозрительно то, что вызов происходил синхронно, что 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);
}

Не идеально, но в противном случае это был бы значительный рефакторинг.

У меня возникла проблема при настройке состояния реакции несколько раз (всегда использовалось состояние по умолчанию). После этой проблемы с реакцией / github у меня сработало

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

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