React setState не обновляет состояние

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);
}

В случае хуков вы должны использовать useEffect хук.

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

setFruit('Apple');

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

Операция setState() является асинхронной и, следовательно, ваша console.log() будет выполнена до того, как setState() изменит значения, и, следовательно, вы увидите результат.

Чтобы решить эту проблему, зарегистрируйте значение в функции обратного вызова setState(), например:

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

SetState является асинхронным в реакции, поэтому, чтобы увидеть обновленное состояние в консоли, используйте обратный вызов, как показано ниже (функция обратного вызова будет выполняться после обновления setState)

this.setState({ email: '[email protected]' }, () => {
   console.log(this.state.email)
)}

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

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

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

просто добавьте метод 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);
}

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

Помимо асинхронного характера setState, имейте в виду, что у вас могут быть конкурирующие обработчики событий, один из которых выполняет нужное вам изменение состояния, а другой немедленно отменяет его снова. Например, onClick для компонента, родительский элемент которого также обрабатывает onClick. Проверить, добавив след. Предотвратите это, используя e.stopPropagation.