Счетчик не увеличивается при использовании хука useState - PullRequest
Новая
       1

Счетчик не увеличивается при использовании хука useState

0 голосов
/ 19 июня 2020

У меня есть следующий код: 

  const [count1, setCount1] = useState(0);


  const handleAsyncUpdate = async () => {
    setCount1(count1 + 2);
    setCount1(count1 + 1);
  };

  const handleSyncUpdate = () => {
    setCount1(count1 + 2);
    setCount1(count1 + 1);
  };

  console.log("render", count1);
  return (
    <div className="App">
      <h2>{count1}</h2>
      <button type="button" onClick={handleAsyncUpdate}>
        Click for async update
      </button>
      <button type="button" onClick={handleSyncUpdate}>
        Click for sync update
      </button>
    </div>
  );
}

Когда я нажимаю на вторую кнопку, я ожидаю, что <h2>{count1}</h2> отобразит 3 (0 + 1 + 2), но вместо этого он отобразит 1.

Если я переключу setCount1(count1 + 1); на setCount1(count => count + 1);, то он работает правильно, но почему?

1 Ответ

1 голос
/ 19 июня 2020

Думаю, вы не понимаете, как работает useState (или даже this.setState, если вы использовали классы). Эти операции всегда асинхронны, React планирует эти изменения в соответствии с тем, что он считает приоритетным или нет. возвращает Promise.

С точки зрения того, как работает React, это ничего не меняет. Таким образом, ваши handleSyncUpdate и handleAsyncUpdate в основном одинаковы для React, они оба запускают асинхронные c операции (изменение состояния).

setCount1(count => count + 1) - Используя это, вы буквально используете последнее состояние значение для обновления, гарантируя, что новое значение будет последним + 1.

setCount1(count1 + 1) - В этом случае вы используете значение, которое изменено другим setState между моментом этого setState вызывается, и в тот момент, когда React выполняет обновление.

Надеюсь, это поможет

...