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

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();  };}, []);祝你好运