Question

我试图通过看起来像

的AJAX调用从我的服务器获取一些数据

fetch_reviews() {
    var scraper_url = this.props.thing.text
    var all_the_data = $.get({
      url: window.location.origin+'/fetch_review_data', 
      data: {scraper_url: scraper_url}
    }).success(function(data){
      this.state.allReviews = data
    });
  }

onle我一直收到错误＆＃34;无法读取未定义的属性 allReviews ＆＃34;

如何从success函数中设置 allReviews 的状态？

Answer 1

您应该使用arrow function（如果您使用ES2015）或.bind来设置将引用您的Component对象的this，因为现在this指的是全局范围（window或undefined如果您使用strict mode），

// ...
.success((data) => {
   this.setState({ allReviews: data })
});

或

// ...
.success(function (data) {
   this.setState({ allReviews: data })
}.bind(this));

如果您需要在React中设置新状态，则必须使用setState方法

Answer 2

当您的状态附加到您的fetch中无法访问的react的执行范围时，您的this更改为$.get执行范围。因此，请将this保存在变量中......

fetch_reviews() {
        var scraper_url = this.props.thing.text;
        var that = this; // hold this in another variable
        var all_the_data = $.get({
          url: window.location.origin+'/fetch_review_data', 
          data: {scraper_url: scraper_url}
        }).success(function(data){
          that.setState({allReviews : data });
        });
      }

从Ajax调用中收到的数据中恢复设置状态

2 个答案: