钩子什么时候更新反应？答案

【问题标题】：When does hooks update in react?钩子什么时候更新反应？
【发布时间】：2020-02-03 12:32:29
【问题描述】：

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

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

【问题讨论】：

根据您的实际用例，最简单的解决方案是使用 useEffect。这是您更新的沙盒codesandbox.io/s/…

标签： reactjs react-hooks

【解决方案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

【讨论】：

【解决方案2】：

因为setIndex 调用是异步的，所以您不能在警报调用中使用它并期待更新后的值。

而不是I would use the useEffect hook 用于依赖于新状态值的任何操作。

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

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

【讨论】：