React Native中解决状态变更触发Promise兑现的闭包问题

先指出代码里的几个基础错误：

• 状态变量拼写错误：importantStat应为importantState
• 父组件里的userRef是笔误，正确写法是useRef
• autoRun中用forEach配合await无效，因为forEach不支持异步流程控制，需改用for...of实现串行执行，或Promise.all实现并行执行

针对核心的闭包问题，提供两种可行解决思路：

方法一：用useRef同步状态，突破闭包限制 #

useState的状态在闭包中是固定快照，而useRef的current属性是可变引用，能始终拿到最新状态值。我们可以把状态同步到ref中：

const Test1 = forwardRef((props, ref) => {
  const [importantState, setImportantState] = useState('initial');
  const importantStateRef = useRef(importantState);

  // 同步状态到ref
  useEffect(() => {
    importantStateRef.current = importantState;
  }, [importantState]);

  useImperativeHandle(ref, () => ({
    run,
  }));

  const run = async () => {
    openInteractionModal();

    return new Promise((resolve, reject) => {
      const interval = setInterval(() => {
        // 从ref中获取最新状态
        const currentState = importantStateRef.current;
        if (currentState === 'complete') {
          resolve('success');
          clearInterval(interval);
        } else if (currentState === 'failed') {
          reject('failed');
          clearInterval(interval);
        }
      }, 100);
    });
  };

  return (
    <>
      <Button title="run" onPress={run} />
    </>
  );
});

方法二：移除轮询，用useEffect监听状态变化（更优解） #

轮询既浪费性能，又容易引发闭包问题。更合理的方式是在状态变化时直接触发Promise的回调，用ref存储Promise的resolve/reject函数：

const Test1 = forwardRef((props, ref) => {
  const [importantState, setImportantState] = useState('initial');
  const promiseCallbacksRef = useRef(null);

  useImperativeHandle(ref, () => ({
    run,
  }));

  // 监听状态变化，触发Promise回调
  useEffect(() => {
    if (!promiseCallbacksRef.current) return;

    const { resolve, reject } = promiseCallbacksRef.current;
    if (importantState === 'complete') {
      resolve('success');
      promiseCallbacksRef.current = null;
    } else if (importantState === 'failed') {
      reject('failed');
      promiseCallbacksRef.current = null;
    }
  }, [importantState]);

  // 组件卸载时清理Promise，避免内存泄漏
  useEffect(() => {
    return () => {
      if (promiseCallbacksRef.current) {
        promiseCallbacksRef.current.reject('component unmounted');
        promiseCallbacksRef.current = null;
      }
    };
  }, []);

  const run = async () => {
    openInteractionModal();

    return new Promise((resolve, reject) => {
      // 存储Promise回调到ref
      promiseCallbacksRef.current = { resolve, reject };
    });
  };

  return (
    <>
      <Button title="run" onPress={run} />
    </>
  );
});

修正父组件的autoRun方法 #

原来的forEach无法正确处理异步等待，改成串行执行的写法：

const ParentComponent = () => {
  const test1Ref = useRef(null);
  const test2Ref = useRef(null);
  const test3Ref = useRef(null);

  const testRefs = [test1Ref, test2Ref, test3Ref];

  const autoRun = async () => {
    // 串行执行每个组件的run方法
    for (const ref of testRefs) {
      try {
        await ref?.current?.run();
      } catch (err) {
        console.error('组件执行失败:', err);
      }
    }

    // 若需并行执行，可替换为以下代码：
    // await Promise.all(
    //   testRefs.map(ref => ref?.current?.run().catch(err => console.error(err)))
    // );
  };

  return (
    <>
      <Button title="Auto run" onPress={autoRun} />
      <Test1 ref={test1Ref} />
      <Test2 ref={test2Ref} />
      <Test3 ref={test3Ref} />
    </>
  );
};

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