使用JQuery post + get data进行反应

Question

我用它来从Django服务器获取todos：

getTodos(){
    $.ajax({url: "http://localhost:8000/todos/",
            success: function(data){
                this.setState({todos:data},function(){console.log(data)})}.bind(this),
            cache: false});
}

这将发布一个新的todo以及更新状态：

  handleAddTodo(title,text){
        $.post("http://localhost:8000/todos/",{title:title,text:text},this.getTodos());
    }

因此回调函数this.getTodos()将从服务器获取新数据。但似乎服务器端没有更新？

在图片中，第一个日志来自初始数据获取。最后一个来自回调函数。

Answer 1

我认为问题在于这一行：

$.post("http://localhost:8000/todos/",{title:title,text:text},this.getTodos());

这里你需要传递一个函数，一旦post部分成功就会触发，但是你没有传递函数，通过使用()调用函数来传递函数返回的值。通过这种方式，此功能将与后呼叫并行调用，检查网络部分，您将同时看到两个呼叫。

使用arrow function：

$.post("http://localhost:8000/todos/",
       {title:title,text:text}, 
       () => {
           this.getTodos()
       }
);

或者像这样写：

$.post("http://localhost:8000/todos/",
       {title:title,text:text}, 
       this.getTodos
);

在构造函数中绑定getTodos方法：

this.getTodos = this.getTodos.bind(this);

查看 DOC 了解详情。