Javascript React componentDidMount未更新状态

我有一个react组件，它在构造函数方法中以一个空白的默认状态开始。 当组件挂载时，我想用通过AJAX从API获得的东西更新状态

此组件的代码如下所示：

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.componentDidMount = this.componentDidMount.bind(this);

    this.state = {
      ownerInfo:{},
      ownerDogs:[],
      ownerApps:[],
      ownerChat:{},
      posts:[]
    }
  }
  componentDidMount(e){
    var that = this;
    $.get('/api/getUserInit', function(result) {
      console.log(result);
      this.setState({
        ownerInfo: result.ownerInfo,
        ownerDogs: result.ownerDogs,
        ownerNotifications: result.ownerNotifications,
        ownerChat: result.ownerChat,
        posts: result.posts
      });
    }.bind(this));
  }
  addComment(e){
    e.preventDefault();
    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
    };  
    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;

---

我真的不知道除了这个方法还有什么可以尝试的：/

如果我理解正确，您希望在更新状态时重新加载代码。ComponentDidMount仅在组件初始化时启动。所有更新都通过ComponentDidUpdate触发。将该接口用于状态更新时将要发生的任何事情

componentDidUpdate: function (prevProps, prevState) {
...
}

更新

对不起，我正在用手机回答这个问题，我想我没有读对。如果希望在每次状态发生更改时进行ajax调用，则可以使用componentDidUpdate，这不是您所要求的

我注意到您正在重新声明构造函数中的componentDidMount，它不应该在那里，因为它已经声明了，您正在覆盖它。除了那段代码，我看不出这里有任何错误。componentDidMount应启动并正确更新。然而，我读到当对象为空时，映射函数出错。确保正在处理空状态，因为第一个绑定将为空，然后第二个绑定将有数据。映射中的错误可能是罪魁祸首。此示例防止在ajax调用返回之前绑定子级

从“React”导入React；
从“./头”导入头；
从“./FeedOwnerColumn”导入FeedOwnerColumn；
从“/FeedColumnRight”导入FeedColumnRight；
从“/ReportBug”导入ReportBug；
类FeedApp扩展了React.Component{
构造函数（）{
超级（）；
//仅添加super未定义的函数
this.addComment=this.addComment.bind（this）；
此.state={
hasData:false，
所有者信息：{}，
所有者日志：[]，
所有者应用程序：[]，
所有者姓名：{}，
员额：[]
}
}
组件安装（e）{
var=这个；
$.get（'/api/getUserInit'，函数（结果）{
控制台日志（结果）；
log（'isMounted:'+this.isMounted（））；
if（this.isMounted（））{
这是我的国家({
hasData：没错，
ownerInfo:result.ownerInfo，
ownerDogs:result.ownerDogs，
ownerNotifications:result.ownerNotifications，
ownerChat:result.ownerChat，
职位：result.posts
});
}
}.约束（这个）；
}
添加评论（e）{
e、 预防默认值（）；
var currTime=新日期（）；
currTime=currTime.toLocaleString（）；
var commentContent=e.target.childNodes[0]。值；
var key=Math.random（）；
键=数学圆（键）；
var新成员={
id:钥匙，
姓名：“彼得红辣椒”，
日期：年月日，
拇指图片：“/imgs/user-q.jpg”，
配置文件链接：“/user/123”，
内容：评论内容，
金额：0
};  
var postsObj=this.state.posts；
//console.log（postsObj[0].comments）；
var newcommons=postsObj[0]。注释；
新来者。推（新来者）；
console.log（新成员）；
this.setState（{posts:postsObj}）；
}
render（）{
var内容=“”；
if（this.state.hasData）{
内容=（
);
}
返回(
{{content}}
);
}
}
导出默认FeedApp；

---

让我知道这是否适合您。

您的

console.log（result）

是否产生任何输出？如果是这样，我怀疑绑定问题。尝试

console.log（this）

查看

this

是否指向正确的对象。我正在将状态作为道具传递给此组件：@wintvelt它生成我在问题底部显示的对象：）或执行

bind（that）

而不是

this

？在代码之后，

render（）

方法应调用两次。它真的叫了两次吗？您能否在每次调用中

console.log

this.state对象？我是否必须在该函数中初始化组件渲染？感谢您的努力，我发现问题在于映射函数在初始空状态下发生故障，因此停止了组件WillMount/DidMount函数

componentDidUpdate: function (prevProps, prevState) {
...
}