除非我刷新，否则 useEffect 不会更新答案

【问题标题】：useEffect not updating unless I refresh除非我刷新，否则 useEffect 不会更新
【发布时间】：2021-05-14 13:22:48
【问题描述】：

我有一个自定义 Hook：

import React, { useState, useEffect } from 'react';
import firebase from "../../firebase";

export default function useCurrentUserDetails() {
    const uid = firebase.auth().currentUser?.uid;
    const [data, setData] = useState(null);

    useEffect(() => {
        if (!uid) {
            setData(null);
            return;
        }

        const unsubscribe = firebase.firestore().collection("users").doc(uid).onSnapshot((snapshot) => {
            if (snapshot.exists) {
                setData(snapshot.data());
            } else {
                setData(null);
            }
        })

        return unsubscribe;
    }, [uid]);

    const updateCurrentUserData = (newData) => firebase.firestore().collection("users").doc(uid).set(newData);
 
    return [data, updateCurrentUserData];
}

当我使用它时，应该只是从firebase 获取用户，我应该能够使用数据。我是这样使用它的：

function HomeScreen({navigation}) {

    const [currentUserDetails, setCurrentUserDetails] = useCurrentUserDetails();
    const [username, setUsername] = useState("")

    useEffect(() => {
        setUsername(currentUserDetails?.name);
    }, [currentUserDetails]);

    return (
        <Screen style={styles.screen}>
            <View>
                <Text>Hello</Text>
                <Text style={styles.nameText}>{username}</Text>
            </View>
        </Screen>
    )
}

当屏幕首次加载时，username 不显示，但可以说我更改为：

<Text style={styles.nameText}>{name}</Text>

并刷新应用程序，name 显示。现在如果我把它改回username:

<Text style={styles.nameText}>{username}</Text>

它有效。

当我打开屏幕时它不显示，我需要刷新变量才能工作。

【问题讨论】：

标签： react-native use-effect

【解决方案1】：

您的 useEffect 正在使用 currentUserDetails 的值，但您没有将它作为依赖项传递给钩子：

 useEffect(() => {
        setUsername(currentUserDetails?.name);
    }, [currentUserDetails]);

【讨论】：

这个也试过了，没有成功

【解决方案2】：

如果您尝试在组件挂载时更新状态，请尝试以下操作：

useEffect(() => {
        if (!uid) {
            setData(null);
            return;
        }[])

【讨论】：