微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。