Обновление переменной во время тайм-аута асинхронной функции

#javascript #reactjs #settimeout

Вопрос:

 const [value, setValue] = useState(0);
const counter = () => {
  setTimeout(() => {
    // setValue(value   1);
    setValue((prevState) => prevState   1);
  }, 2000);
};

counter вызывается при нажатии кнопки, т.е.

 <button onClick={counter}>counter</button>

Почему setValue(value 1) значение обновляется один раз, если я нажимаю кнопку несколько раз, но setValue((prevState) => prevState 1) возвращает правильное значение относительно нажатой суммы?

1. если вы попробуете <button onClick={() => setValue(value 1)}>счетчик </button>, он должен работать так, как ожидалось. Посмотрите здесь для получения дополнительной информации reactjs.org/docs/hooks-state.html#updating-state

2. Спасибо за ссылку

Ответ №1:

Обновления состояния не всегда происходят немедленно. Использование предыдущего значения гарантирует, что вы работаете с текущим значением в момент времени, когда значение устанавливается. Кент Доддс хорошо объясняет это в этом посте . Больший вопрос может быть в том, почему вы оборачиваете это в a setTimeout ?