React Native函数组件实现Agora视频通话出现engine未定义报错

• 函数组件顶层用let engine声明的变量不是持久化的组件实例级存储：函数组件每次重渲染时，整个函数体都会重新执行，这个let声明会被重新初始化为空，之前异步流程赋值的引擎实例会被直接丢弃，后续引用时自然拿到undefined。
• 执行时序无强约束：将权限申请、引擎创建拆成两个独立的挂载级useEffect触发，两个异步流程的执行顺序不可控，极易出现权限未申请完成、引擎初始化流程就提前结束，且赋值动作因变量重置无法留存的问题。
• 闭包引用错位：异步回调中对engine的赋值操作，因为没有固定引用持有，回调执行时拿到的还是最初声明的空变量，赋值动作根本不会被后续代码访问到。

• 用useRef替换顶层let声明持有引擎实例
  useRef返回的对象在组件全生命周期内是固定引用，不会因重渲染被重置，专门适配Agora引擎这类不需要触发视图重渲染的原生模块存储场景。写法示例：

  // 替代原有的 let engine 声明
  const engineRef = useRef(null);
  

  后续创建引擎时直接将返回实例赋值给engineRef.current，所有调用引擎方法的位置都从这个ref对象中取值。
• 合并初始化流程，做顺序约束
  把权限申请、引擎创建、能力开启的步骤串成单个顺序执行的异步函数，挂载时统一触发，避免多effect带来的时序混乱：

  useEffect(() => {
    let isMounted = true;
    const initAgoraFlow = async () => {
      // 1. Android端优先完成权限申请
      if (Platform.OS === 'android') {
        await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.CAMERA,
          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
        ]);
      }
      try {
        // 2. 创建引擎实例并开启视频能力
        const engine = await RtcEngine.create(appId);
        await engine.enableVideo();
        // 仅在组件仍处于挂载状态时完成赋值，避免内存泄漏
        if (isMounted) {
          engineRef.current = engine;
        }
      } catch (err) {
        console.log('引擎初始化失败', err);
      }
    };
    initAgoraFlow();
    // 组件卸载时主动销毁引擎，释放原生资源
    return () => {
      isMounted = false;
      if (engineRef.current) {
        engineRef.current.destroy();
        engineRef.current = null;
      }
    };
  }, []);
  

• 补充排查校验点
  • 确认传入RtcEngine.create()的appId是已开通视频能力的有效值，无空值、格式错误问题
  • 确认Agora SDK的原生依赖已在Android工程完成正确链接，不存在原生模块未注册的问题
  • 调试时可在RtcEngine.create的返回值后直接打印日志，确认SDK返回值本身不存在空值情况，排除SDK层面的异常

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