文档更新后缺少Firestore文档ID

本文介绍了文档更新后缺少Firestore文档ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试练习使用ReactJs和Firestore创建类似于reddit的东西.单击更新按钮时，其Firestore文档中帖子的分数会更新，以某种方式，当React重新获取文档时，id会丢失.

I'm trying to practice creating something similar to reddit using ReactJs and Firestore. When the upvote button is clicked post's score in its Firestore document is updated, somehow when React refetches the documents, the id is missing.

这是日志的图片-请注意第二个日志中的第一项，得分增加了1，但该项中的id丢失了:/尽管我没有赞扬的第二项仍保持其id不变.但是，如果我投票赞成第二项，其ID也将消失.

Here's a picture of the log - notice the first item in the second log, the score increased by 1 but the id in that item is missing :/ Whereas the second item, which i did not upvote, still has its id intact. However, if i upvote the second item, its id would disappear too.

我的父组件:

import React, { Component } from 'react'; import { firestoreConnect, isLoaded } from 'react-redux-firebase'; import { connect } from 'react-redux'; import { compose } from 'redux'; import { upVote } from '../../Store/Actions/PostAction'; import PostCardV2 from '../PostCard/PostCardV2'; import AuthCard from '../Auth/AuthCard'; import SignedInCard from '../Auth/SignedInCard'; class Dashboard extends Component { render() { const { posts, auth } = this.props; console.log(posts); // here is where i console logged const list = posts && posts.map(post => { return( <PostCardV2 key={post.id} post={post} upVoted={()=>this.props.upVote(post.id, post.score)}/> //upvote is a dispatch function ); }) if(!isLoaded(auth)) { var rightBar = <p>Loading</p> } else { if (!auth.uid) { rightBar = <AuthCard/> } else { rightBar = <SignedInCard userName={auth.email}/> } } return( <div className='container'> <div className='row'> <div className='col s8'> {list} </div> <div className='col s4 sticky'> {rightBar} </div> </div> </div> ); } } const mapStateToProps = (state) => { return { auth: state.firebase.auth, posts: state.firestore.ordered.posts } } const mapDispatchToProps = (dispatch) => { return { upVote: (id, score) => dispatch(upVote(id, score)) } } export default compose( connect(mapStateToProps, mapDispatchToProps), firestoreConnect([ { collection: 'posts', orderBy: ['score', 'desc']} ]) )(Dashboard);

我的孩子PostCardV2组件:

my child PostCardV2 component:

import React from 'react'; const PostCardV2 = (props) => { const {imgUrl, title, content, score} = props.post; return ( <div className='row'> <div className='col s12'> <div className='card'> <div className='card-image'> <img src={imgUrl}/> </div> <div className='card-content row'> <div className='col s2'> <div className='center' onClick={props.upVoted}> <i className='small material-icons pointer-cursor'>arrow_drop_up</i> <p>{score}</p> </div> </div> <div className='col s10'> <span className="card-title">{title}</span> <p>{content}</p> </div> </div> </div> </div> </div> ); } export default PostCardV2;

和我的调度功能:

export const upVote = (id, score) => { return (dispatch, getState) => { const newScore = score + 1; firebase.firestore().collection('posts').doc(id).update({ score: newScore, }) } }

推荐答案

重击不是重击，您从不使用调度功能，因此可以将其重写为:

You thunk is not a thunk, you are never using the dispatch function so you could just rewrite it as:

export const upVote = (id, score) => firebase .firestore() .collection('posts') .doc(id) .update({ score: score + 1, })

要消除这种与变形有关的可能性，请尝试将其替换为:

To eliminate the possibility that this is related to the thunk try replacing it with:

export const upVote = (id, score) => firebase .firestore() .collection('posts') .doc(id) .set({ score: score + 1, }, {merge: true})

这应该具有完全相同的行为.如果可以，那么我们知道更新不是问题.

This should have the exact same behaviour. If it does then we know the updating is not the problem.

接下来，您可以尝试记录下如果切换到以下情况会怎样:

Next, can you try logging what happens if you switch to:

export const upVote = (id, score) => firebase .firestore() .collection('posts') .doc(id) .update({ id, score: score + 1, })