加载应用程序时 Supabase 用户数据未按时加载，因此我得到 null

Question

因此，在我的 React Native 应用程序中，我有一个屏幕可以抓取用户数据并将其传递给子组件。 但是，代码给出了以下错误，似乎它没有在屏幕之前渲染，或者可能由于其他原因而完全消失。

Cannot read property 'user_meradata' of null

这是我的代码：

import React, {useState, useEffect} from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import HomeHeader from '../components/homeScreen/homeHeader';
import NextJob from '../components/homeScreen/NJ';
import JobFinder from '../components/homeScreen/JF';
import ButtomSection from '../components/homeScreen/buttonsSection';
import { supabase } from '../lib/supabase'; // adjust the import path to your Supabase client
  

const Home = ({ navigation }) => {
    const [loading, setLoading] = useState(false)
    const [user, setUser] = useState(null);
    useEffect(() => { 
        setLoading(true)
        const fetchUser = async () => {
            const { data: { user } } = await supabase.auth.getUser()
            setUser(user);
            setLoading(false);
        }
        fetchUser();
        setLoading(false)
    }, []);

    return (
        <SafeAreaView>
            <HomeHeader user={user} />
            <NJ />
            <JF />
            <ButtomSection navigation={navigation} />
        </SafeAreaView>
    );
};

export default Home;

这是 HomeHeader.js 应该获得

data

。

const homeHeader = ({ user }) => {
    
    const handleSignOut = async() => {
        const { error } = await supabase.auth.signOut();
        if (error) {
            console.log(error);
        }
    } 

    return (
        <View style={ styles.container } >
            <Text style={ styles.greetingMessage }>Greeting {user.user_metadata.username}!</Text>
            <TouchableOpacity onPress={ () => console.log(user.user_metadata) }>
                <Text>Press</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={ handleSignOut }>
                <Ionicons name="menu" size={40} color="black" style={ styles.menuButton } />
            </TouchableOpacity>
        </View>
    );
};

提到的错误，但我注意到如果我改变线路

Greeting {user.user_metadata.username}!

到

Greeting {user ? user.user_metadata.username : null }!

它有效。但这是为什么呢？

Answer 1

您可以执行以下操作，仅在用户名可用时渲染文本。

{user?.user_metadata?.username && <Text style={ styles.greetingMessage }>Greeting {user.user_metadata.username}!</Text>}