Question

我在下面发布了一段我的ReactJS代码。在这段代码中，我从服务器接收一个JSON数组，并将该JSON数组分配给名为this.records的变量。但问题是，当我在ajax查询之外调用this.records时，我得到一个空数组。请告诉我如何在ajax查询之外获得this.records的修改值？

代码：

constructor() {
    super();

    this.records = [];

    $.ajax({
        url: "http://localhost:8080/UserManagement/rest/myService/data",
    }).then((function(data) {
        this.records = JSON.parse(data)

        /*this.records prints modified value*/
        {console.log(this.records);}

    }).bind(this));


    /*PROBLEM: this.records does not prints modified value here*/
    {console.log(this.records);}
};

Answer 1

好的，所以这是交易，你试图以console.log方式sync返回ajax的值，而ajax以async方式工作。
这意味着当你到达console.log(self.records);（在ajax调用之外）时，ajax还没有返回，数据也不会显示。

您可以通过以下几种方式解决这个问题：

重构您的代码，使用返回值来自 ajax响应本身
制作你的ajax async = false（不推荐）
在setTimeout上加console.log(self.records);，希望ajax届时完成调用。（也不推荐，有点愚蠢）

this现在引用了Ajax返回函数，使用此hack：

this.records = [];
var self = this;

$.ajax({
    url: "http://localhost:8080/UserManagement/rest/myService/data",
}).then((function(data) {
    self.records = JSON.parse(data)

    /*this.records prints modified value*/
    {console.log(self.records);}

}).bind(this));

你也可以使用lambda函数：

this.records = [];

$.ajax({
    url: "http://localhost:8080/UserManagement/rest/myService/data",
}).then(( (data) => {
    this.records = JSON.parse(data)

    /*this.records prints modified value*/
    {console.log(this.records);}

}).bind(this));

如何在ReactJS

1 个答案: