Question

我正在学习React，试图找到正确的方法去做我想做的事情。[/ p>

所以我有一个在构造函数中调用的方法 - 让我们调用这个getData（）。这个方法通过jQuery Ajax调用从外部资源中获取数据（我可能在某些时候使用Fetch或其他东西，但这不是问题），然后使用成员函数formatData（）在数据中应用一些逻辑。电话看起来像这样：

class MyClass extends React.Component {

    // .. constructor, render, etc code

    getData() { // Part of the MyClass class.

        var self = this;
        var effUrl = 'http://someurl';
        return $.ajax({
                  url: effUrl,
                  method: 'GET',
                  appendMethodToURL: false
               })
               .done(function (data) {
                   self.setState( { effString: self.formatData(data['results']) } );
               })
               .fail(function (errorHandler, soapResponse, errorMsg) {
                   alert('Error');
               })
               .always(function () {
                   alert('Always');
               });
    }

    formatData() {

        // format the returned data...
    }
}

虽然代码有效，但这是因为将“this”分配给“self”。因为在我的代码完成时被称为'this'是不同的东西（可能是返回的promise对象）。什么是解决此问题的正确“React”方法 - 本质上，从数据调用内部调用一个组件成员的函数？

tl; dr 我想用我的工作代码中的'self'代替更好的方法。

Answer 1

你的问题的答案是：.bind（this）。首先，您应该在组件的类中绑定getData（） - 最好是构造函数

constructor(props){
  super(props);
  this.getData = this.getData.bind(this);
}

然后你内部的ajax调用你也应该能够像这样绑定它

.done((data) => {
    this.setState( { effString: this.formatData(data['results'])     } );
 })

箭头功能会为你绑定'this'

Answer 2

您希望在componentDidMount中提出请求，而不是构造函数。我将请求定义为单独的方法 - getData或其他任何方法，并将其绑定在构造函数

中

constructor(props) {
  super(props);
  this.state = { effString: null };
  this.getData = this.getData.bind(this);
}

使用componentDidMount参与异步请求的参考： Which kinds of initialization is more appropriate in constructor vs componentWillMount?

如何从Ajax调用中解决React组件方法

2 个答案: