Когда обновляются хуки?

Question

Когда обновляется ловушка при использовании сеттера? Я вижу это как-то должно быть asyn c. Рассмотрим следующий пример, который показывает, что хук не обновляется мгновенно. Вы ждете хуков (если да, то как), если вам нужно значение сразу после этого, или каков здесь нормальный подход?

https://codesandbox.io/s/romantic-snyder-dv84c?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Функция для обновления состояния вызывается асинхронно, поэтому обновленное состояние не будет немедленно отражено.

Вместо этого вы можете выполнить действие при изменении состояния, и для этого у нас есть useEffect hook .

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [index, setIndex] = useState(0);

  function increment() {
    setIndex(prevState => prevState + 1);
  }
  useEffect(() => {
    alert(index);
  }, [index]);

  return (
    <div className="App">
      <div>{index}</div>
      <button onClick={() => increment()}>Increment</button>
    </div>
  );
}

Я обновил ваши коды и коробки здесь

Answer 2

Поскольку вызов setIndex является асинхронным, вы не можете использовать его в вызове оповещения и ожидать обновленное значение.

Вместо Я бы использовал useEffect ловушку для любых действий. которые зависят от нового значения состояния.

useEffect(() => {
  alert(index);
}, [index])

function increment() {
  setIndex(prevIndex => prevIndex + 1); // update based on previous value
}