Expo应用中AppProvider返回Provider时console.log不打印问题求助

问题详情 #

我开发了一个Expo应用，加载了如下Provider组件：

export const AppProvider = ({ children }: { children: ReactNode }) => {
  console.log('Hello from app provider!!');
  const alertsBottomSheetRef = useRef<BottomSheetModal>(null);

  const dismissAlert = useCallback(() => {
    alertsBottomSheetRef.current?.close();
  }, []);

  const values = {
    alertsBottomSheetRef,
    dismissAlert,
  };

  // >>>> return <AppContext.Provider value={values}>{children}</AppContext.Provider>;
};

当注释掉最后一行返回<AppContext.Provider>的代码时，console.log能正常输出，修改日志内容也能同步显示；但取消注释该行后，console.log就不再打印，请问这是什么原因？

原因分析 #

• AppContext引用异常：如果AppContext没有通过createContext正确初始化，或者引用路径写错，组件在渲染AppContext.Provider时会直接抛出错误，导致整个组件函数无法执行到console.log的环节。
• 子组件渲染错误：AppProvider包裹的children如果存在语法或运行时错误，会导致AppContext.Provider无法正常挂载，组件函数的执行被中断，自然不会输出日志。
• Expo开发缓存问题：Expo开发服务器可能缓存了之前的错误状态，即使修复问题也没重新执行组件代码。可以执行expo r -c清除缓存并重启服务器。
• 组件渲染被阻断：在React严格模式下，若AppContext.Provider的使用不符合规范，会触发额外检查并阻止组件渲染，导致console.log不执行。

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