在 reactjs react.Component 中异步 AJAX 请求后无法获取

Question

我的 reactjs 代码有问题。我已经阅读了关于异步世界和可能发生的问题的线程，我想我解决了这个问题，但现在我得到了一个空白，上面有 Cannot GET /thenameofthepage 的文本。

这是我在 react.Component

之后的代码

getList() {
    var returnValue;
      $.ajax({
        type: "get",
        url: "###URL###",
        cache: false,
        async: false,
        success : function(data) {
         returnValue = data;
        }
      });

    return returnValue;
  }

这是 render() {

之后的代码

console.log(this.getList());

如果我控制台登录该功能，那么一切正常。但是当我试图将它传递给一个变量时，一切都崩溃了。我做了异步。不工作。我尝试使用初始状态，但 ComponentDidMount() 再次无法正常工作。

P.S

我尝试使用互联网指南：

constructor() {
    this.state = { data: [] };
  }
  getList() {
    $.ajax({
      type: "get",
      url: "http://havvamustafa.devel.signature.eu.com/manage/collection/list_all_ajax",
      cache: false,
      dataType: 'json',
      success: (data) => {
        this.setState({data: data});
      }
    });
  }

然后

componentDidMount() {
    this.getList();
  }

最后

console.log(this.state.data);

现在由于构造函数，它给我错误。

Answer 1

根据 Jquery $.ajax 的文档，不推荐使用 async: false

async (default: true)

Type: Boolean

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

我不知道你在处理异步数据获取时会想到什么样的问题，但不要忘记使用同步请求会在请求时冻结浏览器等待中。您可以通过以下方式使其更容易：

getList() {
  $.ajax({
    type: "get",
    url: "###URL###",
    cache: false
  }).done(this.handleSuccess);
},

handleSuccess(results) {
  this.setState({data: results});
}

你的数据处理是用其他方法完成的，会更干净！

在 reactjs react.Component 中异步 AJAX 请求后无法获取

Cannot GET after async AJAX request in reactjs react.Component

javascript

ajax

jquery

components

reactjs