React useState 在 useEffect 中并不新鲜答案

【问题标题】：React useState is not fresh in useEffectReact useState 在 useEffect 中并不新鲜
【发布时间】：2020-04-02 19:32:12
【问题描述】：

我的 useState 状态在 useEffect 函数中不是最新的。在我通过 useEffect 中的 setState 更改它后，它会控制台记录我的旧状态。我知道我可以使用 useRef 并将其传递给 useState 但它在内部不起作用，例如设置超时。此处的示例（查看 hook.js 文件和 console.logs）： https://codesandbox.io/s/prod-wildflower-qbwxt

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

function App() {
//  proptype isLoading simulation
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
 setTimeout(() => setIsLoading(true), 3000);
}, []);

// hook
const delayedLoading = useLoading(isLoading);

return (
 <div className="App">
   <h1>Hello {`${delayedLoading}`}</h1>
   <h2>Start editing to see some magic happen!</h2>
 </div>
);
}

export default App;

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

function App() {
  //  proptype isLoading simulation
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    setTimeout(() => setIsLoading(true), 3000);
  }, []);

  // hook
  const delayedLoading = useLoading(isLoading);

  return (
    <div className="App">
      <h1>Hello {`${delayedLoading}`}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App;

【问题讨论】：

请将代码放入您的 stackoverflow 问题中，而不仅仅是在代码框中。发生的事情是您指望 setState 是同步的，但事实并非如此。您的 setLoading 钩子将使用 isLoading 状态的默认值进行初始化，然后当您更新该状态时，它不会以任何方式影响钩子状态。
您刚刚更新了状态，如果您立即记录它，您正在记录当前渲染周期的状态，新状态将无法访问直到 下一个 渲染周期。
这能回答你的问题吗？ React setState not Updating Immediately
您已经添加了两次相同的代码。

标签： reactjs react-hooks

【解决方案1】：

状态更新本质上是异步的。这意味着如果您使用 setter 方法为您的状态设置一个新值，则不能保证您能够通过使用下一行中的状态来获取新值。

React 结合了所有的 setter 方法执行并立即执行。

要解决您的问题，您可以将值存储在变量中，更新 setter 方法中的值，但在余下的执行过程中继续使用变量中的值

【讨论】：