state 更改后 Redux 反应不重新渲染组件

Question

我有帖子，每个帖子都有评论，当我添加新评论时，会显示（渲染）更改，直到我手动刷新页面但我可以在 redux-dev 工具中看到正在调用 ADD_COMMENT 操作并且帖子的 state 正在更改. 我想要的是在将评论添加到数据库后立即在页面上显示评论。 （状态更改和渲染在添加、删除、更新后正常工作）。

posts.js（包含所有帖子）：

class Posts extends Component {
  static propTypes = {
    posts: PropTypes.array.isRequired,
    getPosts: PropTypes.func.isRequired,
    deletePost: PropTypes.func.isRequired,
  };
  componentDidMount() {
    this.props.getPosts();
  }
  onDelete = (id) => {
    this.props.deletePost(id);
  };
  render() {
    return (
      <React.Fragment>
        {this.props.posts.map((_p) => (
          <Post _p={_p} onDelete={this.onDelete} key={_p.id} />
        ))}
      </React.Fragment>
    );
  }
}
const mapToPropTypes = (state) => {
  return { posts: state.posts.posts };
};
export default connect(mapToPropTypes, { getPosts, deletePost })(Posts);

post.js（单个帖子）：

class Post extends Component {
  handleDelete = (id) => {
    this.props.onDelete(id);
  };
  render() {
    var _p = this.props._p;
    return (
      <div className="row pt-3 pb-5">
        <div className="col-lg-8">
          <h1 className="mt-4">{_p.title}</h1>
          {/*.... POST RELATED INPUTS ....*/}
          <hr />
          {/* Comment Form */}
          <CommentForm postID={_p.id} />
          {/* COMMENT COMPONENT */}
          {_p.comments.map((_c) => (
            <Comment key={_c.id} comment={_c} />
          ))}
        </div>
      </div>
    );
  }
}
export default connect()(Post);

评论表单.js：

class CommentForm extends Component {
  state = {
    name: "",
    commentBody: "",
  };

  static propTypes = {
    addComment: PropTypes.func.isRequired,
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const comment = {
      body: this.state.commentBody,
      post: this.props.postID,
      name: this.state.name,
    };
    this.props.addComment(comment);
  };

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };
  render() {
    const { name, commentBody } = this.state;
    return (
      <div className="card my-4">
        <h5 className="card-header">Leave a Comment:</h5>
        <div className="card-body">
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label>Title:</label>
              <input
                type="text"
                name="name"
                value={name}
                onChange={this.handleChange}
                className="form-control"
              />
            </div>
            <div className="form-group">
              <textarea
                className="form-control"
                name="commentBody"
                value={commentBody}
                onChange={this.handleChange}
                rows="3"
              ></textarea>
            </div>
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>
    );
  }
}

export default connect(null, { addComment })(CommentForm);

评论.js：

const Comment = (props) => {
  const _c = props.comment;
  return (
    <div className="media mb-4" key={_c.id}>
      {/* ... COMMENT RELATED OUTPUTS ...*/}
    </div>
  );
};

export default connect(null)(Comment);

减速器：

case ADD_COMMENT:
      state.posts.map((_p) => {
        if (_p.id === action.payload.post)
          _p.comments = [..._p.comments, action.payload];
      });
      return state;

添加评论 function：

export const addComment = (comment) => (dispatch, getState) => {
  axios
    .post("http://127.0.0.1:8000/api/comments/", comment)
    .then((res) => dispatch({ type: ADD_COMMENT, payload: res.data }))
    .catch((err) => console.log(err));
};

Answer 1

可能问题是由于 state 未被视为已修改。

我在你的减速器中看到了两件事：

1. 你使用.map() function，这个 function 返回一个带有你修改结果的新数组。 尝试先存储此值。
2. 然后，在您的减速器中，返回 state 的新副本，其中包含您帖子的新值。

像这样：

let modifiedPosts = state.posts.map((_p) => {
        if (_p.id === action.payload.post)
          _p.comments = [..._p.comments, action.payload];
      });

return  Object.assign( {}, state, {
                posts: modifiedPosts 
            } );