javascript - 更新后如何返回JS对象值

Question

我在处理对象时遇到问题。使用此辅助函数，将输入用户 ID 并返回一个小组件。

当我在控制台中进行测试时，我看到之后应用的名称。它呈现为未定义并且不会更新以反映用户的名称。

目标：使此函数呈现名称

export function renderProInline(uid) {
     const pro = {};
     db.collection('COLLECTION_NAME').doc(uid).get()
          .then(function(doc) {
               if (doc.exists) {
                    pro.name = doc.data().name // THIS IS WHERE THE OBJECT IS UPDATED
               } else {
                    console.log("No such document!");
               }
          })
          .catch(function(error) {
               console.log("Error getting Pro:", error);
          })

     return (
          <div className={'pro'}>
               { `${pro.name}` }
          </div>
     );
}

先感谢您。

标签： javascriptreactjsobjectecmascript-6helper