Question

我的代码是（shortForm）

import..
export default function App({ navigation }) {
   function HomeScreen({ navigation }) {
   ...
   }
   const [ItemURL, setItemURl] = useState('URL')
   return (
        <ItemContext.Provider value={ItemURL}>
            ...
        </ItemContext.Provider>
    )
}

我正在尝试在我的应用中添加上下文 API。尝试添加 useState 时出现此错误。

完整代码

export default function App({ navigation }) {
    function HomeScreen({ navigation }) {
        const [WantLogIn, setWantLogIn] = useState(false)
        const [OpenAnimation, setOpenAnimation] = useState(0)

        useEffect(() => {
            ...
        }, [OpenSetting])

        useEffect(() => {
            ...
        }, [ItemOpen])

        useEffect(() => {
            ...
        }, [OpenAnimation])
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                ...
            </View>
        )
    }    
    
    const [loaded1] = useFonts({
        Poppins_Bold: require('./assets/fonts/Poppins-Bold.ttf'),
    })
    if (!loaded) {
        return null
    } else {
        setCustomText(customTextProps)
    }
    if (!loaded1) {
        return null
    }
    const [ItemURL, setItemURl] = useState('URL')

    return (
        <ItemContext.Provider value={ItemURL}>
            <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
                <NavigationContainer>
                    <Stack.Navigator headerMode='none' mode='model' screenOptions={{}}>
                        
                    </Stack.Navigator>
                </NavigationContainer>
            </ApplicationProvider>
        </ItemContext.Provider>
    )
}

这是我的完整代码并删除了一些不必要的东西。我在这个应用程序中使用了反应导航（是否有任何问题）。

当我将 const ItemURL 放在应用程序函数的另一个 const 的顶部时，它开始工作。

Answer 1

您在检查 useState('URL') 后正在使用 loaded。如果未加载，该函数将返回 null 并且不呈现任何内容，而且永远不会到达最后一个 useState。

现在如果加载了字体，则不会调用返回状态，而是调用 useState。现在你有不同数量的钩子调用，这是被禁止的。

将 useState 移到 (!loaded) 的早期返回上方。

export default function App({ navigation }) {
    function HomeScreen({ navigation }) {
        const [WantLogIn, setWantLogIn] = useState(false)
        const [OpenAnimation, setOpenAnimation] = useState(0)

        useEffect(() => {
            ...
        }, [OpenSetting])

        useEffect(() => {
            ...
        }, [ItemOpen])

        useEffect(() => {
            ...
        }, [OpenAnimation])
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                ...
            </View>
        )
    }    
    
    const [loaded1] = useFonts({
        Poppins_Bold: require('./assets/fonts/Poppins-Bold.ttf'),
    })

    const [ItemURL, setItemURl] = useState('URL') // MOVE THIS UP

    if (!loaded) {
        return null
    } else {
        setCustomText(customTextProps)
    }
    if (!loaded1) {
        return null
    }

    return (
        <ItemContext.Provider value={ItemURL}>
            <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
                <NavigationContainer>
                    <Stack.Navigator headerMode='none' mode='model' screenOptions={{}}>
                        
                    </Stack.Navigator>
                </NavigationContainer>
            </ApplicationProvider>
        </ItemContext.Provider>
    )
}

比上一次渲染时渲染了更多的钩子。（组件异常）

1 个答案: