如何仅在加载值后执行函数？

Question

一旦页面加载了useEffect，我就会使用firebase来执行代码。
我在 Redux 中有一个用户状态，从 null 到实际用户信息需要几秒钟。
我的问题是代码会立即触发，我不确定如何让它等到加载用户信息。

由于“user.email”的“null”值而显示代码错误

const {user} = useSelector(state=>state.user)
const [myGames, setMyGames] = useState([])

useEffect(()=> {
    const unsubscribe = db.collection("games")
    .where("username", "==", user.email)
    .onSnapshot(snapshot=> setMyGames(snapshot.docs.map(doc=> doc.data().game_title)))

    return ()=> {
        unsubscribe()
    }    
}, [])

Answer 1

当你给useEffect 一个空数组作为第二个参数时，你告诉它在第一个组件渲染后运行一次。这不会等待状态更改。为了将 useEffect 绑定到一个数据点，通过在给定的数组中传递它来绑定它。

注意：这会在每次用户更新时触发效果！

例子：

const {user} = useSelector(state=>state.user)
const [myGames, setMyGames] = useState([])

    useEffect(()=> {
        if(user.email !== null){
        const unsubscribe = db.collection("games")
        .where("username", "==", user.email)
        .onSnapshot(snapshot=> setMyGames(snapshot.docs.map(doc=> 
           doc.data().game_title)))
        }
        return ()=> {
            unsubscribe()
        }    
    }, [user])