当我想从函数的返回结果中获取数据时，它返回数据的承诺 [重复]答案

【问题标题】：When I want to get data from return result of a function, it returns promise insted of the data [duplicate]当我想从函数的返回结果中获取数据时，它返回数据的承诺 [重复]
【发布时间】：2021-10-23 14:53:15
【问题描述】：

我使用 firebase 来处理数据库事件等，并使用我在 firebase 初始化的 firebase.js 中的所有函数。我对上面这个函数的期望是比较文档中登录用户的 uid 和整个用户的 uid 并选择正确的。然后，返回它的“最喜欢的词”，所以当我从另一个组件调用这个函数时，我也许可以使用这些数据。

Firebase.js

.
.
.
const getFavoriteWords = async () => {
      const q = query(collection(db, "users"), where("uid", "==", auth.currentUser.uid));
      const querySnapshot = await getDocs(q);
      querySnapshot.forEach((doc) => {
        return doc.data().favourites;
      });
    };

MyWord.js（将显示最喜欢的单词）

   function MyWords() {
  const [words, setwords] = useState([]);

  useEffect(() => {
    setwords(getFavoriteWords());
  }, []);
  return (
    <div>
      <Link to="/dictionary">
        <button>Back</button>
      </Link>
      {words.map((word) => {
        <h1>{word}</h1>;
      })}
    </div>
  );
}

我不知道如何实现这一点。我尝试将它与 .then 链一起使用，但它不起作用。

【问题讨论】：

标签： javascript reactjs firebase

【解决方案1】：

我对 Firebase 了解不多，但我知道 async functions总是返回 promises，所以你需要在 useEffect 中处理它。

async getWords() {
  setwords(await getFavoriteWords());
}
getWords();

另一件事是 forEach 不返回任何内容 - 它会在适当的位置改变数据，因此您需要改用 map 并返回一个数组。

将它们捆绑在一起：

const getFavoriteWords = async() => {
  const q = query(collection(db, "users"), where("uid", "==", auth.currentUser.uid));
  const querySnapshot = await getDocs(q);
  return querySnapshot.map((doc => {
    return doc.data().favourites;
  });
};

还有：

function MyWords() {

  const [words, setwords] = useState([]);

  useEffect(() => {
    async getWords() {
      setwords(await getFavoriteWords());
    }
    getWords();
  }, []);

  ...

}

【讨论】：

【解决方案2】：

异步函数总是返回承诺

您已使用关键字async 来声明您的函数。所以，这是意料之中的。

您可以在异步函数getFavoriteWords 调用完成后立即使用.then 访问返回的数据。

useEffect(() => {
    getFavoriteWords().then(words=>setwords(words));
}, []);

如果你在异步函数内部调用函数，也可以使用await关键字

useEffect(()=>{

    (async () => {
        setwords(await getFavoriteWords());
    })()

}, []);

我正在使用另一个内部函数，因为不建议直接将异步函数传递给useEffect。

【讨论】：