代码之家 › 专栏 › 技术社区 › Nikhil bhatia

项目在页面刷新之前不会映射-使用firestore、react和redux

redux firebase reactjs

Nikhil bhatia · 技术社区 · 7 年前

我有一个问题,每当有人在新帖子上发表评论,但没有评论,它不会显示,但刷新后,所有的评论都会正常显示。

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);

2 回复 | 直到 7 年前

Mihkel Häkkinen 7 年前

这听起来和我在同样的设置中遇到的问题类似。将以下行添加到索引.js文件可能会解决问题: allowMultipleListeners: true

Nikhil bhatia 7 年前

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