React native 错误状态无法更新组件?

React native 错误状态无法更新组件?,react-native,expo,React Native,Expo,我有一个关于国家的问题。每当我导航到一个新页面(主页)并设置onboardingstep的状态时,我都会收到一个错误,说我的状态不好(),因此无法更新。此处是设置状态和错误日志的文件 这是我的入职模板,由入职人员呈现,然后显示在应用程序中: import React, {useState} from 'react' import {View,ScrollView,StyleSheet} from 'react-native' import Logo from '../ui/molecules/

我有一个关于国家的问题。每当我导航到一个新页面(主页)并设置onboardingstep的状态时,我都会收到一个错误,说我的状态不好(),因此无法更新。此处是设置状态和错误日志的文件

这是我的入职模板,由入职人员呈现,然后显示在应用程序中:

import React, {useState} from 'react'
import {View,ScrollView,StyleSheet} from 'react-native'

import Logo from '../ui/molecules/Logo'
import OnboardingInfo from '../ui/organisms/OnboardingInfo'
import OnboardingMedia from '../ui/organisms/OnboardingMedia'
import Button from '../ui/atoms/Button'


import {  useNavigation } from '@react-navigation/native'
            
let currentStep : JSX.Element;
export default function OnboardingTemplate(){
    const navigation :any = useNavigation();
    const [onboardingStep, setOnboardingStep]:any = useState(0);


    if (onboardingStep == 0){
        currentStep=(
            <ScrollView contentContainerStyle={styles.container}> 
                <Logo/>   
                <OnboardingInfo/>
                <View style={styles.topDistance}>
                    <Button onPress={() => setOnboardingStep(1)} 
                    style={styles.inputBtn} title="Fortsæt (1/2)"/>
                </View>
            </ScrollView>
        )    
    } else if (onboardingStep == 1){
        currentStep=(
            <ScrollView contentContainerStyle={styles.container}> 
                <Logo/>   
                <OnboardingMedia/>
                <View style={styles.topDistanceSmall}>
                    <Button onPress={() => setOnboardingStep(2)} 
                    style={styles.inputBtn} title="Opret profil"/>
                </View>
            </ScrollView>
        )
    } else {
        // error occours when this part is run
        navigation.navigate("explore");
    }

    return (currentStep) ? currentStep : null ;
}

    
// styling etc...

我怀疑发生这种情况是因为您正在导航到另一个视图,然后在该组件实际开始渲染null之前进行渲染。我建议将navigate()调用与onboardingStep一起作为依赖项放在useEffect中,以便在按下按钮时运行逻辑。我还建议修改渲染逻辑,以便在每次渲染时不会完全替换模板:相反,使用标记内的条件表达式交换样式和子组件,并直接返回,而不是将其指定给currentStep
Warning: Cannot update a component (ForwardRef(BaseNavigationContainer)) while rendering a different component (OnboardingTemplate). To locate the bad setState() call inside OnboardingTemplate, follow the stack trace as described in setstate-in-render
    in OnboardingTemplate (at Onboarding.tsx:7)
    in Onboarding (created by SceneView)
    in StaticContainer
    in StaticContainer (created by SceneView)
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in div (created by View)
    in View (created by CardContainer)
    in div (created by View)
    in View (created by CardContainer)
    in div (created by View)
    in View (created by ForwardRef(CardSheet))
    in ForwardRef(CardSheet) (created by Card)
    in div (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
    in ForwardRef(AnimatedComponentWrapper) (created by Card)
    in Dummy (created by Card)
    in div (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
    in ForwardRef(AnimatedComponentWrapper) (created by Card)
    in div (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in div (created by View)
    in View (created by WebScreen)
    in WebScreen (created by AnimatedComponent)
    in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
    in ForwardRef(AnimatedComponentWrapper) (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in div (created by View)
    in View (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack (created by Context.Consumer)
    in KeyboardManager (created by Context.Consumer)
    in div (created by View)
    in View (created by NativeSafeAreaView)
    in NativeSafeAreaView (created by SafeAreaProvider)
    in SafeAreaProvider (created by Context.Consumer)
    in SafeAreaProviderCompat (created by StackView)
    in div (created by View)
    in View (created by StackView)
    in StackView (created by StackNavigator)
    in StackNavigator (at routes.tsx:24)
    in EnsureSingleNavigator (created by ForwardRef(BaseNavigationContainer))
    in ForwardRef(BaseNavigationContainer) (created by ForwardRef(NavigationContainer))
    in ThemeProvider (created by ForwardRef(NavigationContainer))
    in ForwardRef(NavigationContainer) (at routes.tsx:23)
    in Navigation (at App.tsx:27)
    in App (created by ExpoRootComponent)
    in ExpoRootComponent (created by RootComponent)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer