React Native Expo多标签页嵌套栈导航器报错：更新深度超限

核心问题定位 #

你遇到的无限更新循环报错，90%概率出在未提供的Convert屏幕代码中。目前贴出的ConvertStack、GradeConverter代码结构和正常的SessionStack一致，不存在触发循环的逻辑，问题必然出在Convert组件内部。

常见触发场景（针对Convert组件排查） #

• useEffect依赖项异常：useEffect没有设置依赖数组，或者依赖项是每次渲染都会生成新引用的对象/数组/匿名函数，导致useEffect反复执行，内部的setState又触发组件重新渲染，形成循环。
  错误示例：

  useEffect(() => {
    setSomeState(newValue);
  }, [{ key: 'test' }]); // 每次渲染都会创建新对象，触发useEffect无限执行
  

• 渲染阶段直接调用setState：在组件渲染逻辑（比如return语句之外、或者直接在函数体里）直接调用setState，导致组件一渲染就更新状态，状态更新又触发渲染，无限循环。
  错误示例：

  const Convert = () => {
    const [data, setData] = useState({});
    setData({ grade: 'V3' }); // 每次渲染都执行，触发循环
    return <Text>{data.grade}</Text>;
  };
  

• 子组件props频繁变化：如果Convert组件里有子组件，传递的props是每次渲染都会新建的对象/函数，导致子组件反复更新，反过来触发父组件更新，形成循环。

排查修复步骤 #

1. 先锁定问题组件：临时注释掉ConvertStack里的<Stack.Screen name="Convert" component={Convert} />，只保留GradeConverter页面。如果报错消失，完全确认问题在Convert组件。
2. 检查Convert组件的useEffect：
   • 确保所有useEffect都有合理的依赖数组，不要放字面量对象/数组
   • 如果需要引用类型依赖，用useMemo（缓存对象/数组）或useCallback（缓存函数）处理后再放入依赖数组
3. 排查渲染阶段的setState：检查Convert组件函数体内，有没有在渲染时直接调用setState的代码，把这类逻辑移到useEffect或者事件回调里。
4. 优化子组件props：如果Convert里有子组件，检查传递的props是否每次渲染都变化，用useMemo/useCallback缓存后再传递。

额外说明 #

你两个栈使用NavigationContainer independent={true}的方式是正确的，多独立导航容器的配置没有问题，不用修改这部分代码。

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