Question

我正在尝试将我的应用程序连接到 Back4App，在按照他们文档中的教程进行操作时，我收到错误：比上一次渲染期间渲染了更多的钩子。这是我的应用功能：

export default function App() {
    
    const [fontsLoaded] = useFonts({ IcoMoon: require('./assets/icomoon/icomoon.ttf') });
    
    if (!fontsLoaded) {
        return <AppLoading />;
    }
    
    useEffect(() => {
        createInstallation = async () => {
            const Installation = Parse.Object.extend(Parse.Installation);
            const installation = new Installation();
          
            installation.set('deviceType', Platform.OS);
            await installation.save();
        };
    
        createInstallation();
    }, []); 
    
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Login">
                <Stack.Screen name="Login" component={telaLogin} options={{ headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
                <Stack.Screen name="Cadastro" component={telaCadastro} options={{headerStyle: {backgroundColor: "#766ec5", borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
                <Stack.Screen name="Home" component={homeTabs} options={{ headerTitle: props => <LogoTitle {...props} />, headerTitleAlign: 'center', headerTintColor: "#d9d9d9", headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}}}/>
            </Stack.Navigator>
        </NavigationContainer>
    );

}

导致错误的具体部分是useEffect。我已经正确安装了所有依赖项，我很确定。

Answer 1

export default function App() {
    const [fontsLoaded] = useFonts({ IcoMoon: require('./assets/icomoon/icomoon.ttf') });
    useEffect(() => {
       createInstallation = async () => {
          const Installation = Parse.Object.extend(Parse.Installation);
          const installation = new Installation();
          installation.set('deviceType', Platform.OS);
          await installation.save();
       };
       if(fontsLoaded) createInstallation();
    }, [fontsLoaded]); 

if (!fontsLoaded) {
    return <AppLoading />;
}
   
return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Login" component={telaLogin} options={{ headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
            <Stack.Screen name="Cadastro" component={telaCadastro} options={{headerStyle: {backgroundColor: "#766ec5", borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
            <Stack.Screen name="Home" component={homeTabs} options={{ headerTitle: props => <LogoTitle {...props} />, headerTitleAlign: 'center', headerTintColor: "#d9d9d9", headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}}}/>
        </Stack.Navigator>
    </NavigationContainer>
);

}

如何修复此错误：渲染的钩子比上一次渲染时多？

1 个答案: