如何将子集合中的数据分配给它的集合并呈现新对象？

Question

我陷入了以下困境，经过大量研究后没有找到任何答案。我想做的是：简单地让用户通过 react 和 useeffect-hook 从 firestore-DB 中包含他们的图像并显示它们。数据库结构如下所示： https ://i.stack.imgur.com/sDcrv.png所以图片是用户集合的子集合。从用户集合中获取用户后，我正在执行第二个请求，使用Object.assign将用户图像添加到该特定用户。在每次 forEach 运行用户集合后，我将用户数组设置为setUsers((oldUsers) => [...oldUsers, currentUser]);. 记录用户数组显示使用包括他们的图像。问题：尝试渲染图像时，它们总是未定义。解决方法：按下一个按钮调用一个函数来重新设置用户：const reRenderUsers = () => {    if (userDataLoaded === false) {      setUserDataLoaded(true);    }    const copy = [...users];    setUsers(copy);  };^ 这解决了问题和显示的所有图像。问题：是否有可能无需“重新渲染”用户即可立即显示图像？例如，我是否使用了 useEffect-hook 错误？我感谢任何建议。提前谢谢了！

Answer 1

这是因为您在 firebase 响应完成回调链之前调用了 setUser。您需要在成功回调内的循环完成后立即更新状态。我已经更新了 useEffect 以在回调后立即更新它

useEffect(() => {

  const unsubscribe = database.collection("users").onSnapshot((snapshot) => {

    snapshot.forEach((doc) => {

      const currentUser = {

        id: doc.id,

        ...doc.data(),

      };

      database

        .collection("users")

        .doc(currentUser.id)

        .collection("pictures")

        .get()

        .then((response) => {

          const fetchedPictures = [];

          response.forEach((document) => {

            const fetchedPicture = {

              id: document.id,

              ...document.data(),

            };

            fetchedPictures.push(fetchedPicture);

          });

          currentUser.pictures = fetchedPictures;

          setUsers((oldUsers) => [...oldUsers, currentUser]);

        })

        .catch((error) => {

          console.log(error);

        });

      //dont need this here

      //setUsers((oldUsers) => [...oldUsers, currentUser]);

    });

  });

  return () => {

    unsubscribe();

  };

}, []);

祝你好运