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])

Settate є асинхронним у відповідь, тому, щоб побачити оновлений стан у консолі, використовуйте зворотний виклик, як показано нижче (функція зворотного виклику буде виконана після оновлення setstate)

Наведений нижче метод "не рекомендується", але для розуміння, якщо ви безпосередньо мутуєте стан, ви зможете побачити оновлений стан у наступному рядку. Повторюю, це "не рекомендується"

просто додайте componentDidUpdate(){}метод у свій код, і він буде працювати. Ви можете перевірити життєвий цикл рідної реакції тут:

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відбувалося з функції зворотного виклику, виданої одним із компонентів. І мені підозріло, що дзвінок відбувався синхронно, що 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);
}

Не ідеально, але в іншому випадку це буде суттєвий рефакторинг.