Javascript 反应组件不'；t更新到状态后重新加载

我有一个表单可以向注释数组this.state.comments提交新注释

在同一个组件中，我希望呈现这些新注释。但由于某些原因，当我添加新注释时，我的组件不会重新加载。我只能在导航到另一个页面并返回该页面时才能看到它。因此，状态肯定是更新的

下面是我的组件，知道为什么吗

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)

类SinglePost扩展了React.Component{
建造师（道具）{
超级（道具）
const id=props.params.id-1；
this.state=props.messages[id]；
this.submitHandler=this.submitHandler.bind（this）；
}
提交者（事件）{
event.preventDefault（）；
让target=event.target；
让comment=target.comment.value，
user=target.user.value，
时间戳=新日期，
id=this.state.id，
cmtId=this.state.comments.length？（this.state.comments.length+1）：1
this.props.postnocomment（{id，user，comment，cmtId}）；
}
render（）{
const post=this.state；
让hour=post.timestamp.getHours（）；
小时=hour>12？`hour-12}`:hour==0？'12':`hour}`；
让minute=post.timestamp.getMinutes（）；
分钟=小时>12？`{minute}pm`:`{minute}am`；
返回(
返回岗位
{post.title}
发件人：{post.user}在{hour}:{minute}

{post.message}

响应
{post.comments.length>0&&post.comments.map（cmt=>）}
信息：
用户：
回复后
)
}
}
常量mapStateToProps=状态=>{
返回{
消息：state.messages.messages
}
}
常量映射DispatchersToprops={
新来者
}
导出默认连接（MapStateTops、MapDispatcherToprops）（SinglePost）

---

我的剩余部分。

看起来您正在初始化您的状态，使其来自构造函数中的道具，但在道具更改时从不更新状态，因此状态永远不会更改。对我来说，你根本不需要使用

state

类似这样的话，您也不需要构造函数：

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

---

我同意奥斯汀的观点，你不应该在这里使用state。这里的输入不受控制（您没有处理来自父组件的输入的状态更改）

但是，如果您是，正确的方法是使用

组件willreceiveprops

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

另一项建议。实际上，通过访问ownProps并传入id，您可以从mapStateToProps函数传递“post”。例如：

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

---

这里的主要优点是您没有将整个消息数组传递给每个组件，如果您在一个页面上有很多这些组件，这可能会对性能造成不利影响

你能不能也给我看看这个州所在的父组件？@Amimohamedajani我把剩余的回购都包括进去了，因为stackoverflow开始对我大喊大叫，因为我包含了太多的代码。希望有帮助！我拿到了404。这是一个私有回购吗？一旦我将submitHandler改为this

submitHandler=（event）=>{

，去掉

.bind

它似乎就不起作用了。我尝试访问post this.props.messages[this.props.params.id-1]并且在构造函数中去掉了this.state，它仍然不会重新命名。如果我去掉了构造函数，this.props将变得未定义