求助：setTimeout无法获取React中loading更新值问题

你遇到的是闭包陷阱：因为useEffect的依赖数组是空的，里面的delay函数捕获的是组件初始渲染时的loading值，30秒后即使loading已经更新为false，函数里拿到的还是最初的true，导致不符合预期的判断。

下面给两种实用的解决方法：

方法一：用useRef保存最新的loading值 #

useRef的.current属性不会被闭包锁定，会实时同步最新的state值，适合只需要触发一次30秒延迟的场景：

import { useEffect, useRef, useState } from 'react';

export const sleep = async (callback = null, timeInMs = 3000) =>
  new Promise((resolve) => setTimeout(() => resolve(callback), timeInMs));

// 组件内部代码
const [loading, setLoading] = useState(true);
const [secondCall, setSecondCall] = useState(false);
// 创建ref保存最新loading值
const loadingRef = useRef(loading);

// 同步state到ref
useEffect(() => {
  loadingRef.current = loading;
}, [loading]);

useEffect(() => {
  async function delay() {
    await sleep(30000);
    // 这里取ref的current属性，拿到最新的loading值
    if (loadingRef.current) {
      setSecondCall(true);
    }
  }
  delay();
}, []);

方法二：给useEffect添加loading依赖并清理定时器 #

如果需要在loading变化时重新触发延迟逻辑（比如每次loading变为true都启动30秒倒计时），可以把loading加入依赖数组，同时要清理之前的定时器避免重复任务：

首先修改你的sleep函数，让它支持取消：

export const sleep = (timeInMs = 3000) => {
  let timeoutId;
  const promise = new Promise((resolve) => {
    timeoutId = setTimeout(resolve, timeInMs);
  });
  // 返回取消定时器的函数
  return {
    promise,
    cancel: () => clearTimeout(timeoutId)
  };
};

然后修改组件中的useEffect：

import { useEffect, useState } from 'react';

// 组件内部代码
const [loading, setLoading] = useState(true);
const [secondCall, setSecondCall] = useState(false);

useEffect(() => {
  const { promise, cancel } = sleep(30000);
  
  async function delay() {
    await promise;
    if (loading) {
      setSecondCall(true);
    }
  }
  
  delay();
  
  // 清理函数：组件卸载或loading变化时，取消之前的定时器
  return cancel;
}, [loading]);

两种方法的区别 #

• 方法一：只会在组件挂载时触发一次30秒延迟，之后不管loading怎么变，都用最新的loading值判断，适合只需要一次延迟的场景。
• 方法二：每次loading变化都会重新启动一个新的30秒延迟，同时取消旧的延迟任务，适合需要跟随loading状态重置倒计时的场景。

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