React Native使用useState做登录态条件渲染触发解构非可迭代错误

这个报错的触发是两个代码问题叠加的结果，和你的条件渲染逻辑本身无关：

• 你把组件AppBody定义在了App组件内部，每次App因为isLoggedIn状态变化重新渲染时，都会生成一个和之前完全不同引用的新AppBody组件。RN 0.63配套的旧版react-navigation（v5/v6早期版本），在解析Stack.Navigator的子节点时，会对节点做数组解构遍历，当父组件每次渲染都生成新的组件引用时，导航库的节点校验逻辑会识别到结构异常，直接抛出“无法解构非可迭代实例”的错误。
• 你错误地在useEffect里手动执行了AppBody()：组件本身是需要被React调度渲染的结构，手动调用本质是把组件当普通函数跑，返回的JSX根本不会进入React的渲染树，反而会让导航库拿到的上下文参数异常，直接触发节点解构报错。

之前你觉得代码“昨天还能跑今天就报错”，本质是近期安装依赖时，旧版导航库的补丁更新收紧了对非法节点结构的校验，之前侥幸能兼容的写法，现在就会被直接拦截。

1. 删掉useEffect里手动调用AppBody()的无效代码：这行代码本来就没有实际作用——你已经在App的return里正常渲染<AppBody />了，手动执行函数既不会更新状态，也不会生成真实的渲染内容，纯纯是冗余逻辑。
2. 不要把需要渲染的嵌套组件定义在父组件内部，直接把渲染逻辑搬到App组件的return节点里，彻底消除每次渲染生成新组件引用的问题。
3. 给条件分支包裹的React片段加唯一的key属性，适配旧版导航库对Stack.Navigator直接子节点的遍历要求，避免出现节点识别错误。

修复后的可运行代码：

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isLoggedIn ? (
          <Stack.Screen
            key="init-entry"
            name="Initiation"
            component={Initiation}
            options={{headerShown: false}}
          />
        ) : (
          <React.Fragment key="auth-required-screens">
            <Stack.Screen
              name="Activities"
              component={Activities}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="Messages"
              component={Messages}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="Persona"
              component={Persona}
              options={{headerShown: false}}
            />
          </React.Fragment>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

• 你之前尝试“把条件渲染直接写在App主体”没解决问题，核心原因是没有删掉useEffect里手动调用组件的那行异常代码，那个错误调用才是触发解构报错的最直接原因。
• 旧版RN0.63对应的导航库，不允许Stack.Navigator的直接子级放无key的多节点分支，哪怕用空的<>片段也要补key，不然遍历节点时会把非数组的节点结构当成可迭代对象，直接抛出同类报错。

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