时间戳

首页 > 解决方案 > 异步分配后反应不渲染

javascript - 异步分配后反应不渲染

问题描述

我很确定问题出在异步行为上。我认为这是因为我的 react 应用程序有条件地呈现 whenuserLinks.exists为 true ，但这仅在 firebase 方法完成后才被分配。关于如何解决这个问题的任何建议？该页面不断呈现一个带有错误的空白屏幕：

react-dom.development.js:13413 
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). 
If you meant to render a collection of children, use an array instead.

应用程序.js

const User = async ({ match, location }) => {

  const userLinks = await firebase.getUserInfo(match.params.user)

  return (
    <React.Fragment>
      { userLinks.exists ? <h1>Loaded and works!</h1> : <h1>Didn't work</h1> }
    </React.Fragment>

firebaseconfig.js

class Firebase {
  constructor() {
    firebase.initializeApp(firebaseConfig);
    this.auth = firebase.auth();
    this.db = firebase.firestore();
  }

  async getUserInfo (username) {
    let userInfo = { exists: false }
    await this.db.collection("users").doc(username).get().then(doc => {
      if (doc.exists) {
          console.log("Document data:", doc.data());
          userInfo.exists = true;
          userInfo = { ...userInfo, links: doc.data().links };
      } else {
          // doc.data() will be undefined in this case
        console.log("No such document!");
      }
    }).catch(function(error) {
        console.log("Error getting document:", error);
    });
    return userInfo;
  }

export default new Firebase();

标签： javascriptfirebaseasynchronousgoogle-cloud-firestore

解决方案

使用async/await不会使代码突然同步运行。你仍然需要注意返回承诺和价值，并把它们冒泡。

在您的代码中，我认为应该是这样的：

  async getUserInfo (username) {
    return await this.db.collection("users").doc(username).get().then(doc => {
      if (doc.exists) {
        return { exists: true, links: doc.data().links };
      } else {
        return { exists: false }
      }
    }).catch(function(error) {
      console.log("Error getting document:", error);
    });
  }

推荐阅读