React组件更新state后未重新渲染问题排查求助

我帮你找到了问题的核心原因，以及对应的修复方法：

核心问题：组件没有响应props的更新 #

你的SinglePost组件在构造函数里直接把props的消息数据赋值给了自身state，但React组件的构造函数只会在组件挂载时执行一次。当你通过postNewComment更新Redux中的messages状态后，组件的props.messages确实会更新，但组件自身的state依然是初始化时的旧数据——这就是为什么切换页面重新挂载组件后才能看到新评论的原因。

具体修复步骤 #

1. 移除构造函数中对state的不必要赋值 #

把构造函数简化，不再将props数据存入组件自身state：

constructor(props) {
  super(props);
  this.submitHandler = this.submitHandler.bind(this);
}

2. 在render中直接从props获取最新数据 #

每次render时都从props里拿到最新的帖子数据，而不是依赖组件自身state：

render() {
  // 实时获取当前帖子的索引和数据
  const postId = this.props.params.id - 1;
  const post = this.props.messages[postId];

  // 处理帖子不存在的边界情况
  if (!post) return <div>Loading post...</div>;

  // 时间格式化（顺便修复你原来的am/pm逻辑错误）
  let hour = post.timestamp.getHours();
  const period = hour >= 12 ? 'pm' : 'am';
  hour = hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
  const minute = post.timestamp.getMinutes().toString().padStart(2, '0');

  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}{period}</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>
  )
}

3. 更新submitHandler中的数据获取逻辑 #

原来的submitHandler依赖组件state拿帖子ID，现在要改成从props里获取最新数据：

submitHandler(event) {
  event.preventDefault();
  const target = event.target;
  const comment = target.comment.value;
  const user = target.user.value;
  const postId = this.props.params.id - 1;
  const post = this.props.messages[postId];
  const cmtId = post.comments.length ? post.comments.length + 1 : 1;

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

  // 可选：提交后清空表单
  target.reset();
}

为什么这样修复有效？ #

Redux是单一数据源，你的帖子和评论数据都存在Redux的store里，组件只需要作为"展示层"从props中获取最新状态即可。当Redux中的messages更新时，connect高阶组件会自动把最新的props传递给SinglePost，触发组件重新render，这样就能实时看到新增的评论了。

内容的提问来源于stack exchange，提问作者Kaisin Li