Как обратиться к методам компонентов React из вызовов Ajax

Я изучаю Реагировать, спотыкаясь, пытаясь найти правильный способ делать то, что я хочу делать.Как обратиться к методам компонентов React из вызовов Ajax

У меня есть метод, который вызывается в конструкторе - назовем это 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... 
    } 
}

Хотя код работает, это происходит из-за хака присвоения «это» до «я». Так как в моем коде, когда это сделано, называется «это», это что-то другое (возможно, объект возвращенного обещания). Каков правильный способ «Реагировать» для решения этой проблемы - по сути, вызывать функцию, являющуюся членом компонента изнутри вызова данных?

tl; dr Я хотел бы заменить свое использование «я» в своем рабочем коде тем, что было лучшим подходом.

источник

2017-02-20 Ev Conrad

Если вы используете функции стрелок ES6, вам не нужно переназначать 'this' -' (data) => this.setState ({...}) ', поскольку функции стрелок имеют одинаковую область действия как их «родитель». Вы также можете использовать функции стрелок для методов класса: 'getData =() => {...}', область действия будет областью класса. –

'this' не имеет ничего общего с React конкретно. –

Я бы не согласился с тем, что он полностью не связан с Реагировать на то, что соответствующие методы жизненного цикла для извлечения данных и состояния настройки являются фактором полного ответа @FelixKling. –

Ответ на ваш вопрос: .bind (это). Во-первых, вы должны связать GetData() в классе вашего компонента - предпочтительно конструктор

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

тогда внутри вас АЯКС позвонить вы также должны быть в состоянии связать его как этот

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

функции стрелка будет связывать «это 'для вас

источник

2017-02-20 21:03:45 Mateusz

Угадайте, что каждый называет метод get-get. –

Вы хотите сделать свой запрос в 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?

источник

2017-02-20 21:01:44

Как обратиться к методам компонентов React из вызовов Ajax

ответ

Смежные вопросы