更新到状态后，React组件不会重新渲染

Question

I have a form to submit a new comment to the comment array this.state.comments.

In the same component I want to render these new comments. But for some reason my component doesn't rerender when I add a new comment. I can only see it when I navigate to a different page and and come back to it. So the state is definitely updated.

Below is my component, any idea why?

class SinglePost extends React.Component {
    constructor(props) {
        super(props)
        const id = props.params.id - 1;
        this.state = props.messages[id];

        this.submitHandler = this.submitHandler.bind(this);
    }

    submitHandler(event) {
        event.preventDefault();
        let target = event.target;
        let comment = target.comment.value,
            user = target.user.value,
            timestamp = new Date,
            id = this.state.id,
            cmtId = this.state.comments.length ? (this.state.comments.length + 1) : 1

        this.props.postNewComment({ id, user, comment, cmtId });
    }

    render() {
        const post = this.state;
        let hour = post.timestamp.getHours();
        hour = hour > 12 ? `${hour - 12}` : hour === 0 ? '12' : `${hour}`;

        let minute = post.timestamp.getMinutes();
        minute = hour > 12 ? `${minute}pm` : `${minute}am`;

        return (
            <div>
                <Link to='/'><button className="btn btn-secondary">Back to Posts</button></Link>
                <h3>{post.title}</h3>
                <p>By: {post.user} on {hour}:{minute}</p>
                <p>{post.message}</p>
                <h4>Responses</h4>
                {post.comments.length > 0 && post.comments.map(cmt => <SingleCommentBox cmt = {cmt} key = {cmt.id}/>)}
                <div>
                    <form id="new-comment-form" onSubmit={this.submitHandler}>
                        <label className="required">Message:</label>
                        <textarea
                            className="form-control"
                            name="comment"
                            type="text"
                            required />
                        <label className="required">User:</label>
                        <input
                            className="form-control"
                            name="user"
                            type="text"
                            required />
                        <button className="btn btn-success" type="submit">Post Reply</button>
                    </form>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        messages: state.messages.messages
    }
}

const mapDispatchersToProps = {
    postNewComment
}

export default connect(mapStateToProps, mapDispatchersToProps)(SinglePost)

Rest of my repo .

Answer 1

It looks like you're initializing your state to be from props in the constructor, but never updating the state when the props change, so the state will never change. To me it like you don't need to use state at all.

Something like this, then you don't need a constructor either:

class SinglePost extends React.Component {

    submitHandler = (event) => {
      event.preventDefault();
      let target = event.target;
      let comment = target.comment.value,
        user = target.user.value,
        timestamp = new Date(),
        id = this.props.params.id - 1;
      const comments = this.props.messages[id].comments;
      const cmtId = comments.length ? (comments.length + 1) : 1;

      this.props.postNewComment({ id, user, comment, cmtId });
    }

    render() {
      const id = props.params.id - 1;
      const post = this.props.messages[id];
      let hour = post.timestamp.getHours();

Answer 2

I agree with Austin that you shouldn't need to use state here. Your inputs here aren't controlled (You aren't handling the state changes of the inputs from your parent component).

If you were however, the correct way to do this is use componentWillReceiveProps .

componentWillReceiveProps(nextProps) {
  const id = nextProps.params.id - 1;
  this.setState(() => ({post: nextProps.messages[id]});
}

Another recommendation. You can actually just pass down 'post' from your mapStateToProps function by accessing ownProps and passing in the id. An example:

const mapStateToProps = (state, ownProps) => {
 return {
   post: state.messages[ownProps.id - 1)
  }
 }    

The main advantage here is your not handing down the entire messages array to each component, which could bad for performance if you have a lot of these components on a single page.