Question

我有一个我试图用React处理的表单。这是handleSubmit函数中的ajax方法：

$.ajax({
  data: formData,
  dataType: "json",
  url: '/requests',
  type: "POST",
  success: function(data, status, xhr) {
    console.log('SHOW HERE ON RESPONSE');
    this.setState({
      formSubmitted: true
    });
  }
});

当我点击提交时，我可以看到POST请求通过，服务器响应200.但是从未输入成功回调，我没有看到控制台消息。

我的rails控制器的动作很简单：

return render nothing: true, status: 200 if request.xhr?

包含服务器响应的日志包括：

Completed 200 OK in 11ms (Views: 2.5ms | ActiveRecord: 2.6ms)

然而，当我将ajax请求中的成功回调中的内容移动到complete回调时，我在控制台中看到了这个错误：

Uncaught TypeError: this.setState is not a function

Answer 1

您看到此错误，因为this在$.ajax() success回调中的行为有所不同，因为jQuery在内部使用它。

假设您正在执行以下ajax调用以响应点击功能，那么：

var $this = $(this);
$.ajax({
  data: formData,
  dataType: "json",
  url: '/requests',
  type: "POST",
  success: function(data, status, xhr) {
    console.log('SHOW HERE ON RESPONSE');
      $this.setState({
      formSubmitted: true
    });
  }
});

Answer 2

在回调中，this引用ajax调用的jqXHR对象，而不是您期望的上下文（在这种情况下，您调用的组件为setState）

$.ajax允许您明确设置上下文以避免这些类型的冲突。

$.ajax({
  data: formData,
  dataType: "json",
  url: '/requests',
  type: "POST",
  context: this,
  success: function(data, status, xhr) {
    console.log('SHOW HERE ON RESPONSE');
    this.setState({
      formSubmitted: true
    });
  }
});

添加context: this将解决此问题。

与React和Rails的Ajax成功问题

2 个答案: