Question

使用setter时挂钩何时更新？我可以看到它一定是异步的。考虑下面显示的示例，该钩子不会立即更新。如果您只是在紧随其后需要值，您是否在等待钩子（如果是，如何使用），或者这是正常的方法？

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

Answer 1

状态更新功能被异步调用，因此更新后的状态不会立即得到反映。

您可以改为在状态更改时执行操作，为此，我们具有useEffect钩子。

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

我已经更新了您的密码和框here

Answer 2

由于setIndex调用是异步的，因此您不能在警报调用中使用它并期望更新后的值。

对于依赖于新状态值的任何操作，I would use the useEffect hook代替。

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

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

挂钩何时更新反应？

2 个答案: