在开始之前,我先说说我是Java语言的新手,而且是axios API调用的新手,所以我很可能在犯一个菜鸟错误.

我具有此函数getObjects(),该函数用于在数组上进行映射并从Axios API调用返回数据. API调用和map函数都可以正常工作,但是我正在获取Promise对象,而不是想要获取的数据.

我认为这是因为在没有足够的时间实际获取数据之前返回了数据,但不确定如何解决？我尝试了.setTimeout(),但这似乎没有用.

  getObjects() {
    let newsItems = this.state.arrayofids.map((index) => {
      let resultOfIndex = axios.get(`https:\/\/hacker-news.firebaseio.com/v0/item/${index}.json`).then((res) => {
          let data = res.data;
          //console.log(data.by); // this prints the correct byline, but
                              // all the bylines are printed after
                              // the console.log below...
          if (!data.hasOwnProperty('text')) return data;
        }); /// end of axios request
  return resultOfIndex;
    }); /// end of map
    /// ideally this would end in an array of response objects but instead i'm getting an array of promises...
    console.log(newsItems);
  }

(多余的转义符是为了我的文本编辑器的利益.)

Here’s a link to a codepen with the issue-打开控制台以查看问题.这是一个React项目,但我认为没有任何React问题.编辑：Codepen链接到使用axios.all的工作解决方案,如下所示

谢谢！

编辑：这是我的工作解决方案.

getObjects() {
  let axiosArr = [];
  axios.all(this.state.arrayofids.map((id) => {
      return axios.get(`https:\/\/hacker-news.firebaseio.com/v0/item/${id}.json`)
    })).then((res) => {
      for (let i = 0; i < this.state.arrayofids.length; i++) {
        axiosArr.push(<li key={i} data-url={res[i].data.url} onClick={(e) => this.displayTheNews(e)}>{res[i].data.title}</li>);
      }
      if (axiosArr.length == this.state.arrayofids.length) {
        this.setState({arrayofdata: axiosArr});
        console.log('state is set!');
      }
    })
 }

解决方法:

axios.all函数应该更适合您当前的情况.