React中如何延迟后检查状态并执行对应函数？

你遇到的问题本质是闭包捕获导致的：useState返回的value是每次组件渲染时的常量，初始渲染时创建的setTimeout回调会捕获当时的value（即false），哪怕后续setValue(true)更新了状态，定时器执行时依然会用旧的value值。

下面提供两种可行的解决方案：

方法一：用useRef跟踪最新状态 #

useRef的current属性是可变的，且不会触发组件重渲染，我们可以用它同步保存value的最新值，让定时器回调能拿到实时状态：

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

const [value, setValue] = useState(false);
// 创建ref同步最新value
const valueRef = useRef(value);
const func = () => {
  // 带数据库操作的逻辑
};
const funcWithoutDbOperations = () => {
  // 无需数据库操作的逻辑
};

// 每次value更新时，同步到ref
useEffect(() => {
  valueRef.current = value;
}, [value]);

// 设置定时器，读取ref的最新值判断
const timerId = setTimeout(() => {
  if (!valueRef.current) {
    func();
  } else {
    funcWithoutDbOperations();
  }
}, 20000);

// 组件卸载时清理定时器，避免内存泄漏
useEffect(() => {
  return () => clearTimeout(timerId);
}, [timerId]);

fetchData.then(() => setValue(true));

方法二：用useEffect动态管理定时器 #

利用useEffect的依赖特性，当value变化时重新处理定时器逻辑，更简洁且自动处理清理：

import { useState, useEffect } from 'react';

const [value, setValue] = useState(false);
const func = () => {
  // 带数据库操作的逻辑
};
const funcWithoutDbOperations = () => {
  // 无需数据库操作的逻辑
};

useEffect(() => {
  // 如果value已经为true，直接执行对应函数
  if (value) {
    funcWithoutDbOperations();
    return;
  }

  // 否则设置定时器，20秒后执行func
  const timerId = setTimeout(() => {
    func();
  }, 20000);

  // 当value变化或组件卸载时，清除定时器
  return () => clearTimeout(timerId);
}, [value]);

fetchData.then(() => setValue(true));

两种方法都能解决问题：方法一适合需要在定时器内灵活判断状态的场景，方法二利用React的生命周期自动管理定时器，代码更精简。

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