钩子什么时候在反应中更新?

Question

使用二传手时钩子什么时候更新？我可以看到它一定是异步的。请考虑以下示例，它显示钩子不会立即更新。您是否等待钩子(如果是，如何(如果您需要之后的值，或者这里的正常方法是什么？

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

我在这里更新了你的代码沙箱

Answer 2

由于setIndex调用是异步的，因此不能在警报调用中使用它，而是需要更新的值。

相反，我会将useEffect钩子用于依赖于新状态值的任何操作。

useEffect(() => {
alert(index);
}, [index])
function increment() {
setIndex(prevIndex => prevIndex + 1); // update based on previous value
}