React中Promise无法识别状态变量submitPressedOnEvent的问题

问题根源：React状态的闭包快照陷阱 #

你遇到的问题核心是React函数组件的闭包特性：当processRowsAsync函数执行时，它捕获了当前渲染周期的submitPressedOnEvent状态快照（初始值为false）。后续调用setSubmitPressedOnEvent(true)会触发组件重新渲染，但定时器的回调函数始终属于旧渲染周期的闭包环境，只会引用那个旧的false值，永远无法检测到状态更新后的true。

断点时看到的true是新渲染周期的状态，但定时器代码执行时仍处于旧闭包，所以实际判断时还是用旧值。

解决方案1：使用useRef保存可变引用（简单直接） #

useRef的current属性是可变的，不会被闭包捕获快照，所有渲染周期都能访问到最新值，完美解决状态快照问题。

1. 替换useState为useRef跟踪提交状态：

// 原状态定义替换为ref
const submitPressedOnEventRef = useRef(false);

2. 子组件回调中更新ref的current：

// 子组件提交回调里改成
const handleSubmit = () => {
  submitPressedOnEventRef.current = true;
  // 其他提交逻辑...
};

3. 修改processRowsAsync代码，使用ref访问最新值：

const processRowsAsync = async (rows: any[]) => {
  for (const row of rows) {
    setCurrentLineData({ ...row, category: "" });
    setShowEventDialog(true);

    await new Promise((resolve) => {
      const interval = setInterval(() => {
        if (submitPressedOnEventRef.current) {
          submitPressedOnEventRef.current = false; // 重置状态
          clearInterval(interval);
          resolve(null);
        }
      }, 500);
    });

    console.log("Selected Category: " + currentLineData?.category);
  }
};

解决方案2：用useEffect监听状态变化（更符合React范式） #

避免轮询，通过监听状态变化来触发Promise的resolve，性能更优，也更贴合React的响应式设计。

1. 定义ref保存Promise的resolve函数：

const resolvePromiseRef = useRef<(() => void) | null>(null);

2. 添加useEffect监听提交状态：

useEffect(() => {
  if (submitPressedOnEvent && resolvePromiseRef.current) {
    setSubmitPressedOnEvent(false);
    resolvePromiseRef.current(); // 触发Promise完成
    resolvePromiseRef.current = null; // 重置ref
  }
}, [submitPressedOnEvent]);

3. 修改processRowsAsync，移除定时器：

const processRowsAsync = async (rows: any[]) => {
  for (const row of rows) {
    setCurrentLineData({ ...row, category: "" });
    setShowEventDialog(true);

    await new Promise((resolve) => {
      resolvePromiseRef.current = resolve; // 保存resolve函数
    });

    console.log("Selected Category: " + currentLineData?.category);
    setShowEventDialog(false); // 处理完关闭弹窗
  }
};

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