状态不佳无法更新组件?

时间:2021-04-23 12:08:56

标签: react-native expo

我有一个关于状态的问题。每当我导航到一个新页面(主页)并且设置了 onboardingstep 的状态时,我都会收到一条错误消息,说我的 state() 错误并且因此无法更新。设置状态和错误日志的文件在这里。

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

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...

这是我得到的错误:

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

0 个答案:

没有答案