使用 React 从 Firestore 中的 id 数组中获取文档数组答案

【问题标题】：Get array of documents from array of ids in firestore using React使用 React 从 Firestore 中的 id 数组中获取文档数组
【发布时间】：2021-09-02 18:25:39
【问题描述】：

我需要使用来自 firestore 的一组用户 ID 在 react 中取回一组文档。我想将其作为一个函数调用，并将一个 id 数组传入其中，然后返回一个对象数组，其中包含具有匹配 userId 的所有文档。

userIds 数组看起来像这样

["2","3","4"]

我需要以数组形式返回的对象，以及它在数据库中作为集合的结构将如下所示：

 {
    dateCreated: 1630348731918,
    docId: "ljAIJmthfwSLwU4FPdMW",
    emailAddress: "rreay724@gmail.com",
    followers: ["2","3"],
    following: ["2"],
    fullName: "Bobby R.",
    userId: "3",
    username: "bobby"
  }

以下是我目前拥有的代码。

export const getFollowers = async (followerIds) => {
  if (followerIds.length > 0) {
    const result = await firebase
      .firestore()
      .collection("users")
      .where("userId", "in", followerIds)
      .get();

    const followers = result.docs.map((item) => ({
      ...item.data(),
      docId: item.id,
    }));
    return followers;
  }
};

我在 useEffect 中调用它，在整个页面中看起来像这样：

export default function FollowerPopUp({ visible, closeWindow, followers }) {


  useEffect(() => {
    const response = getFollowers(followers);
    console.log(response);
  }, [followers]);

  return (
    <div
      className={`overflow-auto z-30 m-0 p-0 h-2/6 w-3/12  border rounded-xl bg-white text-left fixed ${visible}`}
    >
      <div className="flex border-b border-gray-primary w-full h-8 mt-2 px-5 ">
        <p className="mx-auto font-bold pl-6">Followers</p>
        <img
          src="/images/cancel.png"
          className="cursor-pointer h-5 mt-0.5"
          onClick={closeWindow}
        />
      </div>

      <FollowerRow
        following={true}
        username={"kratos"}
        fullName={"Kratos God of War"}
      />
    </div>
  );
}

实际上，我现在用 Promise Result 和我需要的对象数组返回了一个 Promise。现在我只需要将该数组放入一个变量中进行映射。

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(2)
0: {username: "kratos", following: Array(0), userId: "2", fullName: "Kratos the God of War", followers: Array(1), …}
1: {dateCreated: 1630347676459, userId: "3", following: Array(1), emailAddress: "cloud@ff7.com", username: "cloud", …}
length: 2

【问题讨论】：

“它不起作用”没有太多可使用的信息。我们看不到followerIds 的值，也看不到返回的值，也看不到您数据库的内容。请编辑问题以提供您的调试详细信息和您的minimal complete example，以便任何人都可以使用重现该问题。
我已经更新了我的问题。我不确定如何正确写出我的数据库是如何设置的。我有一个用户集合，然后是这些用户下的文档列表，然后每个文档都按照上面提供的对象示例进行格式化。抱歉，我对此很陌生。我只是不确定如何使用我将传入的用户 ID 数组检索这些文档的数组作为对象。谢谢！
“只是一个被拒绝的承诺” - 向我们展示该承诺的内容。里面有错误信息，对吧？这是问题中应该包含的调试信息的关键部分。
更新了更多信息。我实际上是在承诺中恢复数据。我知道我写错了，它实际上是错误的并且说无效的查询。 “in”过滤器也需要一个非空数组。抱歉信息不足。我在这里问问题还很陌生。
我再次更新了代码。我实际上能够使用对象数组来实现一个已履行的承诺，但我不确定如何将 PromiseResult 取出到要映射的对象数组中。

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

我自己解决了这个问题。我的代码看起来像这样，现在它可以工作了，我可以撤回我需要的东西。

从 Firestore 中提取数据的功能：

export async function getFollowers(followerIds) {
  if (followerIds.length > 0) {
    const result = await firebase
      .firestore()
      .collection("users")
      .where("userId", "in", followerIds)
      .get();

    const followers = await Promise.all(
      await result.docs.map(async (item) => ({
        ...item.data(),
        docId: item.id,
      }))
    );
    return followers;
  }
}

useEffect 中返回关注者数组的代码：

 useEffect(() => {
    const getFollowerList = async () => {
      const followerList = await getFollowers(followers);
      await setFollowersList(followerList);
    };
    getFollowerList();
  }, [followers]);

【讨论】：