Question

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

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

我的父组件：

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组件：

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,
    })
  }
}

Answer 1

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

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

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

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

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

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

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

文档更新后缺少Firestore文档ID

1 个答案: