单独的 Axios 调用数组中的每个项目

Question

我对使用 React 进行 axios 调用不是很有经验，我正在尝试进行 axios 调用以获取数组，然后使用该数组对数组中的每个项目进行 axios 调用。我从第一次调用中获取数组，然后从每个单独的调用中获取 objects 的数组，但在状态更新后没有任何渲染。这是我的代码：

我尝试使用单独的方法来更新 object 数组的状态，但这没有用。

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>
     );
   }
 }

我希望能够映射并获取每个 object 并相应地使用每个 object 的属性。每个 object 看起来像这样：

{by: "thinksocrates" id: 20004127 kids: [...] score: 28 title: "OKR" }

渲染器没有返回任何标题，但我可以在状态更改后在控制台日志中看到它们，所以我不确定发生了什么。我猜我得到的承诺数组不正确，但我不确定如何在这种情况下使用 axios.all。

Answer 1

你需要在这里使用 Promise.all

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

你的 promise 数组填充了 promises 而不是对象来正确呈现它们你需要等待所有响应

此外，componentDidMount() 中的此操作将花费大量时间，因此最好考虑使用加载程序初始化状态，直到所有响应都检索到

Answer 2

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>
     );
   }

单独的 Axios 调用数组中的每个项目

Individual Axios Call For Each Item In Array

render

reactjs

axios