Реагируйте: это не определено в функции асинхронного обратного вызова

Question

Я давно занимаюсь этим, пожалуйста, мне нужна помощь.Я пытаюсь позвонить по ссылке API, и у меня есть массив данных, чтобы сделать вызов в качестве параметров для вызова.И после того, как вызов был сделан, я хочу установить состояние компонента на полученный результат.

let animals = ['cats','goats'] ;
async.each(animals, function(item, cb){
  axios.get(`http://api.com?keyword=${item}`)
    .then(res=> {
        apiData.push(res.data)
        this.setState({
          stateData: apiData 
        });
     });
   })

Answer 1

Используйте функцию стрелки как для forEach, так и для обратного вызова API-запроса, что предотвратит повторное присвоение javascript значения this во время цепочки обратных вызовов.

Подробнее о функциях стрелки в ES6 читайте: https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

Answer 2

async.each имеет смысл, только если вы хотите выполнить один запрос за другим, а затем вам нужно вызвать cb(), чтобы цепочка продолжалась:

 async.each(array, (item, cb) => { // <- arrow func!
   axios.get(`/http://api.com?keyword=${item}`)
   .then(res => {
     apiData.push(res.data);
     this.setState({ stateData: apiData });
     cb(); // <---
   });
});

Или выполнить все параллельно (что, вероятно, намного быстрее):

 const promises = array.map(item => axios.get(`/http://api.com?keyword=${item}`).then(res => res.data));

 Promise.all(promises).then(stateData => {
   this.setState({ stateData });
 });

PS: вы всегда должны обрабатывать ошибки в обещании, поэтому просто прикрепите .catch(/*..*/) к цепочке ...,