React Native中Supabase用户数据加载延迟致null报错咨询

问题根源 #

你的Home组件初始化时const [user, setUser] = useState(null);，所以组件第一次渲染时，user的值是null。而获取Supabase用户数据的fetchUser是异步函数，需要等待网络请求完成才会调用setUser(user)更新状态。

这时候HomeHeader组件接收到的user是null，直接执行user.user_metadata.username就会抛出错误——因为null是没有user_metadata这个属性的，JS不允许从null/undefined上读取属性。

解决方法生效的原因 #

你用的user ? user.user_metadata.username : null是三元运算符的短路判断：

• 当user不为null/undefined时（也就是异步请求完成，用户数据已经获取到），才会执行user.user_metadata.username读取用户名；
• 当user还是null时，直接返回null，避免了从null上读取属性的操作，自然不会报错。

额外需要注意的问题 #

1. Home组件useEffect里的逻辑错误：

useEffect(() => { 
    setLoading(true)
    const fetchUser = async () => {
        const { data: { user } } = await supabase.auth.getUser()
        setUser(user);
        setLoading(false);
    }
    fetchUser();
    setLoading(false); // 这行代码会在异步请求完成前就把loading设为false，逻辑错误
}, []);

应该删掉外层的setLoading(false)，只保留fetchUser内部的那个，否则loading状态会提前失效，失去加载状态的意义。

2. HomeHeader里的TouchableOpacity存在同样风险：

<TouchableOpacity onPress={ () => console.log(user.user_metadata) }>

如果用户在数据加载完成前点击这个按钮，同样会抛出错误，建议改成：

<TouchableOpacity onPress={ () => user && console.log(user.user_metadata) }>

内容的提问来源于stack exchange，提问作者Danny