ReactJS中的Firestore子集合查询不会重新呈现组件

问题描述

我正在尝试使用React来显示我在Firestore数据库中持有的职位列表，包括每个职位的子集合。数据库的内容并不重要，但是结构很重要。看起来就是这样：

firestore -> positions collection -> position documents (10 fields here) -> position-submission-info collection -> position-submission-info documents (5 fields here)

所以我需要一次性获得10个位置文档级别字段和5个位置提交字段的所有位置。这是我正在使用的代码，但是在视图中未显示任何位置提交字段。子集合查询完成后，组件不会重新呈现。我很确定这是因为子收集结果正在更新组件使用的对象数组中的对象，而React无法看到更新，因此不会重新渲染。

useEffect(() => {
    const getPositions = fbPositionsDB.get().then(docs => {
        let tmpitems = [];
        docs.forEach(function(position) {
            var positionInfo = { key: position.id,submitted: [],info: position.data() }; //<-- this is shown in the component
            
            position.ref.collection("submitted").get().then(submissons => {
                if (!submissions.empty) {
                    submissions.forEach(submitted => {
                        positionInfo["submitted"].push({ key: submitted.id,info: submitted.data() }); //<-- but not this
                    });
                }
            });
            tmpitems.push(positionInfo);
        });
        updatePositions(tmpitems);  // <-- setState function
    });
    return () => getPositions();
},[]);

因此，结果数据将如下所示：

tmpitems = [
  {
    "key": <int>,"info": <object> with 10 items,"submitted": [<object>,<object>,<object>...]  //<-- this array is getting updated in the subcollection query
  }
]

是否有其他方式查询或更新我的状态数据？我尝试移动tmpitems的更新位置和调用setState函数updatePositions的位置，但仍然无法获取所有显示的数据。另外，并非所有职位都有提交信息。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）