时间戳

首页 > 解决方案 > 使用 useState 破坏不可迭代实例以进行条件渲染的尝试无效

javascript - 使用 useState 破坏不可迭代实例以进行条件渲染的尝试无效

问题描述

从字面上看，已经敲了大约4个小时。我不断收到错误：

Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

我正在尝试根据用户是否登录有条件地呈现组件。这是我的代码

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const AppBody = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          {isLoggedIn ? (
            <Stack.Screen
              name="Initiation"
              component={Initiation}
              options={{headerShown: false}}
            />
          ) : (
            <>
              <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}}
              />
            </>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  };

  React.useEffect(() => {
    AppBody();
  }, [isLoggedIn]);

  return <AppBody />;
};

export default App;

这个逻辑一直很好，直到今天我开始收到上面的错误。我尝试了几种不同的解决方案，包括直接在 App.js 主体而不是 AppBody.js 主体中返回条件逻辑，并且我还尝试过多次重新排序代码。

在这一点上，我知道我错过了一些显而易见的东西。我只是不知所措。

额外的

代码 12.4

反应原生 0.63

错误堆栈

This error is located at:
    in Activities (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:620)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:613)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:495)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at App.js:24)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:23)
    in AppBody (at App.js:59)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

标签： javascriptreactjsreact-nativeuse-state

解决方案

错误出现在我的活动文件中。我有一个正在解构的对象，看起来像：

const [var1, var2] = {
    key: value
};

我愚蠢地让这段代码没有完成，并且不知道它导致了错误，因为我没有读取错误堆栈。我花了 4 个小时来调整错误的文件。教训 - 总是阅读错误堆栈。

推荐阅读