时间戳

首页 > 解决方案 > 始终返回对象而不是承诺 useEffect()

reactjs - 始终返回对象而不是承诺 useEffect()

问题描述

我试图从firestore中的文档“user”中获取“isSeller：true”字段，但一直未定义。最终我意识到 useEffect 中的用户对象通常返回一个 promise ( __proto__: object) 而不是实际的对象。

function StorefrontPage(props) {
  const auth = useAuth();
  const router = useRouter();
  const [user, setUser] = useState({});

  const uid = auth.user && auth.user.uid;


  useEffect(() => {
    uid && getUser(uid).then(currentUser => {
      setUser(currentUser);
    })
    console.log(user);
  }, [])

  console.log(user);

我第一次运行它时，它会返回我想要的对象，但随后的刷新和页面更改会将 console.log 变成一个__proto__对象/承诺。我认为将它包装在 useEffect 钩子中可以解决这个问题，但事实并非如此。如何确保它始终返回用户对象而不是承诺？

作为参考，getUser 函数为：

export function getUser(uid) {
  return firestore.collection('users').doc(uid).get().then(user => {
    return user.data();
  })
}

标签： reactjsgoogle-cloud-firestorereact-hooks

解决方案

从效果上你可以只午餐设置状态的功能

useEffect(() => { uid && getUser(uid, setUser)}, [])

并.catch在使用后添加.then

export function getUser(uid, setUser) {
  return firestore.collection('users')
                 .doc(uid).get()
                 .then(user => setUser(user))
                 .catch(err => console.log(err))
}

推荐阅读