элементы не отображаются до тех пор, пока страница не обновится - используйте firestore, реагируйте и используйте редукцию

Question

Я работал над проектом форума, Ii использовал firestore в качестве внутренней базы данных, реагировал и использовал избыточность. У меня возникает проблема, когда кто-то публикует комментарий к новому сообщению без комментариев, он не отображается, но после появления обновления все комментарии после этого отображаются нормально.

github https://github.com/nikhilb2/Forum развертывание http://mariosforum.surge.sh/signin

Может кто-нибудь, пожалуйста, помогите мне.

import React, { Component } from "react";
import { postComment } from "../../store/actions/projectActions";
import { connect } from "react-redux";
import moment from "moment";
class Comment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comment: "",
      authorId: "",
      projectId: ""
    };
    this.handleContent = this.handleContent.bind(this);
    this.handlePost = this.handlePost.bind(this);
  }
  handleContent(e) {
    this.setState({
      comment: e.target.value,
      projectId: this.props.projectId,
      authorId: this.props.auth.uid
    });
  }
  handlePost() {
    this.props.postComment(this.state);
    this.refs.comment.value = "";
  }
  render() {
    const { user, project, state } = this.props;
    console.log(`user`);
    console.log(this.props);
    return user ? (
      <div className="container">
        {project &&
          project.comment &&
          Array.isArray(project.comment) &&
          project.comment.map(comment => {
            const authorId = comment.authorId;
            //console.log(user[authorId]);
            //console.log(authorId)

            return (
              <div className="container project-details">
                <div className="card z-depth-0">
                  <div className="card-content">
                    {comment.comment}
                    <div className="card-action grey lighten-4 grey-text">
                      {user[authorId] ? user[authorId].firstName : authorId}{" "}
                      {user[authorId] ? user[authorId].lastName : authorId}
                      <div>
                        {comment.time
                          ? moment(comment.time.toDate()).calendar()
                          : authorId}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        <div className="card z-depth-0">
          <div className="card-content">
            <div className="input-field">
              <label htmlFor="comment">Type Comment</label>
              <textarea
                id="comment"
                ref="comment"
                type="text"
                className="materialize-textarea"
                onChange={this.handleContent}
              />
            </div>
            <button
              className="btn pink lighten-1 z-depth-0"
              onClick={this.handlePost}
            >
              Post
            </button>
          </div>
        </div>
      </div>
    ) : null;
  }
}

const mapDispatchToProps = dispatch => {
  return {
    postComment: project => dispatch(postComment(project))
  };
};
const mapStateToProps = state => {
  console.log(state);
  return {
    state: state
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Comment);

Answer 1

Звучит похоже на проблему, с которой я столкнулся при той же настройке. Добавление следующей строки к настройкам реагировать с избыточностью в вашем файле index.js может решить проблему: allowMultipleListeners: true

Answer 2

export const postComment = (project) => {
  return(dispatch,getState,{getFirestore}) =>{
  const firestore = getFirestore()
  console.log(getState())
  firestore.collection('projects').doc(project.projectId).update({
    comment: firestore.FieldValue.arrayUnion({
      comment:project.comment,
      authorId:project.authorId,
    time: new Date()})
  }).then(()=>{
    dispatch({
      type:'POST_COMMENT',
      project
    })
  }).catch((err)=>{
    dispatch({type:'POST_COMMENT_ERROR'})
  })
}}

Вам необходимо добавить действие, чтобы обновить хранилище для комментариев, так что каждый раз, когда вы делаете комментарий, оно будет обновлять хранилище для резервов