React 0.13版本下如何从ajaxUtils POST请求获取响应并存入变量

解决方法 #

你现有代码的报错大概率是then回调的this指向不对，而非React 0.13不支持setState。如果确实需要把响应存入变量取用，可参考以下两种方案： #

方案1：直接挂载到组件实例（无需setState） #

React 0.13允许直接给组件实例挂载自定义属性存数据，不需要走state流程：

var YourComponent = React.createClass({
  submitPost: function() {
    // 提前保存组件实例指向，避免回调里this丢失
    var componentInstance = this;
    ajaxUtils.ajax({
      url: 'https://reqres.in/api/posts',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        'Id': 'ABC',
        'state': 'BCD',
        'startDate': '2021-07-28',
      }),
      processData: false
    }).then(function(res) {
      // 把响应直接挂载到组件实例上
      componentInstance.responseData = res;
      // 如果需要数据更新后刷新视图，手动调用forceUpdate
      componentInstance.forceUpdate();
      console.log('*** set result response', res);
      console.log('Our response', res);
    });
  },
  render: function() {
    // 渲染时直接读取实例上的属性，注意提前判空
    return (
      <div>
        {this.responseData ? <div>请求返回结果：{JSON.stringify(this.responseData)}</div> : <div>请求处理中</div>}
      </div>
    )
  }
})

方案2：修复this指向后使用setState #

React 0.13版本通过React.createClass创建的组件本身支持setState，你之前的报错是回调内this指向全局而非组件实例导致的，修改后可正常使用：

submitPost: function() {
  var self = this;
  ajaxUtils.ajax({
    url: 'https://reqres.in/api/posts',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      'Id': 'ABC',
      'state': 'BCD',
      'startDate': '2021-07-28',
    }),
    processData: false
  }).then(function(res) {
    // 用提前保存的组件实例调用setState
    self.setState({res: res});
    console.log('*** set result response', res);
    console.log('Our response', res);
  });
}

注意事项 #

• 直接挂载到组件实例的自定义属性不会自动触发视图重渲染，需要更新视图时手动调用forceUpdate()
• 读取响应数据前必须判空，避免请求未完成时读取不到属性导致报错

内容的提问来源于stack exchange，提问作者sangeetha