Индивидуальный вызов Axios для каждого элемента в массиве - PullRequest
Новая
       25

Индивидуальный вызов Axios для каждого элемента в массиве

1 голос
/ 27 мая 2019

Я не очень опытен в использовании вызовов axios с React, и я пытаюсь сделать вызов axios, чтобы получить массив, а затем использовать этот массив, чтобы сделать вызов axios для каждого элемента в массиве.Я получаю массив из первого вызова, а затем получаю массив объектов из каждого отдельного вызова, но после обновления состояния ничего не отображается.Вот мой код:

Я пытался использовать отдельный для обновления состояния массива объектов, но это не сработало. 

state = {
    items: [],
    searchItem: "newstories",
    promises: [{}]
   };

 componentDidMount() {

     const { searchItem } = this.state;
     axios
       .get(
         "https://hacker-news.firebaseio.com/v0/" +
           this.state.searchItem +
           ".json?print=pretty"
       )
       .then(result => {


         const topStories = result.data;

         this.setState({ topStories });

        let promises = [];
         for (let i = 0; i < topStories.length; i++) {
           axios
              .get(base + topStories[i] + extension)
             .then(res => {
               const newItem = res.data;
               promises.push(newItem.title);
             })
             .catch(error => console.log("Something went wrong"));
         }
         // Set the state of the array of objects
        this.setState({ promises });

       });
   }

 render() {

let counter = 0;

return (
  <div> 
        {this.state.promises.map(stories => (
          <li style={{ listStyle: "none" }} key=stories.id>
            {(counter += 1)}. {stories.title}
          </li>
        ))}
    </div>
     );
   }
 }

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

{by: "thinkocrates" id: 20004127 kids: […] очки: 28 title: "OKR"}

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

Ответы [ 2 ]

2 голосов
/ 27 мая 2019

this.setState({ promises }); будет выполняться до того, как все обещания будут решены.Это лучший способ сделать это. 

.then(result => {
   const topStories = result.data;
   const promises = topStories.map(story => {
     return axios.get(base + story + extension).then(res => res.data)
   })
   Promise.all(promises).then(data => {
     console.log(data)
     this.setState({ promises: data })
   })

Изменить рендер 

render() {
   return (
      <div> 
         {this.state.promises.map((stories, index)=> (
            <li style={{ listStyle: "none" }} key=stories.id>
              {`${index + 1}}.${stories.by}`}
            </li>
         ))}
      </div>
     );
   }
2 голосов
/ 27 мая 2019

вам нужно здесь, чтобы использовать Promise.all

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

ваш массив обещаний заполнен обещаниями, а не объектами для их правильной визуализации, вам нужно дождаться всех ответов

Более того, это действие внутри componentDidMount () займет некоторое время, поэтому лучше рассмотреть возможность инициализации состояния с помощью загрузчика, пока все ответы не получат

...