React中useEffect如何先完成state更新再执行后续逻辑？

问题原因 #

• useState 返回的状态更新函数setAccount是异步批量执行的，调用后不会立刻修改当前渲染闭包下的account变量，同一段代码逻辑中拿到的始终是本次渲染对应的旧状态值。
• 类组件的this.setState支持传入第二个回调参数，会在状态更新完成、组件重新渲染后执行，所以能拿到更新后的状态，但函数组件的useState没有提供类似的回调接口。
• 你给出的示例代码本身存在结构问题：异步获取逻辑封装在main函数内但没有调用，且直接在useEffect第一层写await会抛出语法错误，不要直接给useEffect的回调函数加async关键字，会导致清理函数无法正常执行。

解决方案 #

方案1：直接使用拉取到的新值（最推荐） #

你已经在异步请求中拿到了最新的fetchedAccount，不需要等待状态更新完成，直接用这个值调用someFunction即可，性能最优逻辑也最清晰：

function App() { 
  const [account, setAccount] = useState("0x123");

  useEffect(() => {
    async function main() {
      const fetchedAccount = await /* 你的账户拉取逻辑 */
      setAccount(fetchedAccount);
      // 直接用拿到的新值执行业务逻辑
      console.log(fetchedAccount);
      const result = await someFunction(fetchedAccount);
    }
    main();
  }, []);
}

方案2：拆分useEffect监听account变化 #

如果你的业务逻辑必须依赖状态中的account值，可以拆分为两个useEffect，一个负责拉取数据更新状态，另一个监听account变化触发业务逻辑，同时跳过初始值的执行：

function App() { 
  const [account, setAccount] = useState("0x123");

  // 仅挂载时执行：拉取账户更新状态
  useEffect(() => {
    async function fetchAccount() {
      const fetchedAccount = await /* 你的账户拉取逻辑 */
      setAccount(fetchedAccount);
    }
    fetchAccount();
  }, []);

  // 监听account变化，跳过初始值执行业务逻辑
  useEffect(() => {
    // 初始预设值直接返回，不执行逻辑
    if (account === "0x123") return;
    async function execLogic() {
      console.log(account);
      const result = await someFunction(account);
    }
    execLogic();
  }, [account]);
}

内容的提问来源于stack exchange，提问作者hungryhungrydev