javascript - 使用 JQuery post+get 数据使用react

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 部分成功，该函数就会触发，但您没有传递一个函数，而是通过使用 () 调用该函数来传递函数返回的值。通过这种方式，该函数将与 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
);

并在构造函数中绑定(bind)getTodos方法:

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

检查DOC 了解更多详情。