Javascript ES6 React组件将装载不更新状态

我有一个组件，它应该通过ajax加载一些状态。 基本语法：

import React from 'react';
import Header from './Header';
import FeedOwnerColumn from './FeedOwnerColumn';
import FeedColumnRight from './FeedColumnRight';
import ReportBug from './ReportBug';

class FeedApp extends React.Component{
  constructor(){
    super();

    this.addComment = this.addComment.bind(this);

  this.state = {
      ownerInfo: {},
      ownerDogs: [],
      ownerNotifications: [],
      ownerChat: {},
      posts: []
    };

  }
  componentWillMount(e){
     var that = this;
$.ajax({
  url: '/api/getUserInit',
  method: 'POST',
  data: {},
  success: function(response){
    console.log('Success: ', response);
    that.setState({
      ownerInfo: response.ownerInfo,
      ownerDogs: response.ownerDogs,
      ownerNotifications: response.ownerNotifications,
      ownerChat: response.ownerChat,
      posts: response.posts
    });
  },
  error: function(response){
    console.log('Error: ', response);
  }
});
  }
  addComment(e){
    e.preventDefault();
    //console.log(e.target.childNodes[0].value);

    var currTime = new Date();
    currTime = currTime.toLocaleString();

    var commentContent = e.target.childNodes[0].value;

    var key = Math.random();
    key = Math.round(key);

    var newComment = {
      id: key,
      name: "Peter Paprika",
      date: currTime,
      thumb_picture:"/imgs/user-q.jpg",
      profile_link: "/user/123",
      content: commentContent,
      like_amount: 0
    };

    //console.log(this.state.posts);

    var postsObj = this.state.posts;

    //console.log(postsObj[0].comments);

    var newComments = postsObj[0].comments;
    newComments.push(newComment);

    console.log(newComments);
    this.setState({posts: postsObj});

  }
  render() {
    return (
        <div className="clearfix wrapper">
          <Header />
          <FeedOwnerColumn />
          <FeedColumnRight posts={this.state.posts} addComment={this.addComment} />
          <ReportBug />
        </div>
    );
  }
}


export default FeedApp;

从“React”导入React；
从“./头”导入头；
从“./FeedOwnerColumn”导入FeedOwnerColumn；
从“/FeedColumnRight”导入FeedColumnRight；
从“/ReportBug”导入ReportBug；
类FeedApp扩展了React.Component{
构造函数（）{
超级（）；
this.addComment=this.addComment.bind（this）；
此.state={
所有者信息：{}，
所有者日志：[]，
所有者通知：[]，
所有者姓名：{}，
员额：[]
};
}
组件将安装（e）{
var=这个；
$.ajax({
url:“/api/getUserInit”，
方法：“POST”，
数据：{}，
成功：功能（响应）{
console.log（'Success:'，response）；
那是一个州({
ownerInfo:response.ownerInfo，
ownerDogs:response.ownerDogs，
ownerNotifications:response.ownerNotifications，
ownerChat:response.ownerChat，
帖子：response.posts
});
},
错误：函数（响应）{
console.log（'错误：'，响应）；
}
});
}
添加评论（e）{
e、 预防默认值（）；
//console.log（e.target.childNodes[0].value）；
var currTime=新日期（）；
currTime=currTime.toLocaleString（）；
var commentContent=e.target.childNodes[0]。值；
var key=Math.random（）；
键=数学圆（键）；
var新成员={
id:钥匙，
姓名：“彼得红辣椒”，
日期：年月日，
拇指图片：“/imgs/user-q.jpg”，
配置文件链接：“/user/123”，
内容：评论内容，
金额：0
};
//log（this.state.posts）；
var postsObj=this.state.posts；
//console.log（postsObj[0].comments）；
var newcommons=postsObj[0]。注释；
新来者。推（新来者）；
console.log（新成员）；
this.setState（{posts:postsObj}）；
}
render（）{
返回(
);
}
}
导出默认FeedApp；

第一个空白状态设置得非常完美，但不幸的是componentWillMount方法中的ajax请求没有更新当前状态。（obj的响应是正确的）

我做错了什么/

---

编辑删除打字错误。

首先，在

componentWillMount（）

方法中有打字错误<代码>t缺失

其次，根据，对于ajax请求，您应该使用

componentDidMount

---

编辑：正如David提到的，您应该使用

this.setState（）

方法来改变状态。

您必须使用

that.setState

函数代替

that.state

 that.setState({
      ownerInfo: response.ownerInfo,
      ownerDogs: response.ownerDogs,
      ownerNotifications: response.ownerNotifications,
      ownerChat: response.ownerChat,
      posts: response.posts
    });

谢谢，因为我不在我的个人电脑上，所以我很快就把它打出来了-今天晚些时候我会用componentDidMount试用它！另外，
that.state={
不是更新状态的方式。您应该使用
this.setState
。您是对的，在轮班开始前我急于发布这个问题时，我犯了这些错误。当然，我是用这个.setState（{）调用状态更新的嘿，谢谢你的提问-我真的无法接受任何答案，因为这个问题属于我在此问题范围内没有涉及的问题。我正在将state.posts进一步向下传递到另一个组件，并且由于初始状态为空，映射函数不知道该做什么，因为我没有为空posts状态构建任何回退。否w一切都很好，随着
组件Willmoun
打字，您正在使用
that.state=
，尽管您需要使用
that.setState（）
触发重新渲染。您好，感谢您的参与-不幸的是，这就是我正在做的-我更正了我的问题并删除了我匆忙插入的打字。