Javascript 加载网站时，如何在我的React应用程序上显示来自黑客新闻API的所有故事？

我制作了一份黑客新闻搜索的副本，但当我进入我的网站时，我无法显示API中的所有故事。根本没有故事出现。我必须在搜索栏上键入一些内容才能全部显示出来

我已经用axios获取了数据，我

console.log

collection，似乎已经成功获取了数据，因为我可以在控制台上看到该集合

github回购协议：

网站：

我的App.js文件（src/containers/App.js）的开头：

---

以下是如何使用的示例：

首先，

TopStories

端点返回post

id的列表。然后需要将每个
id
解析为自己的
post
。为了简化这一点，您可以利用。当输入数组中提供的所有
承诺
自行解析时，此方法将解析

我还使用它来处理状态更改。看看如何使用
useState
和
useffect
挂钩处理状态

无论如何，下面是代码示例：


我希望它能有所帮助。
下面是一个示例，说明如何使用：

首先，
TopStories
端点返回post
id的列表。然后需要将每个
id
解析为自己的
post
。为了简化这一点，您可以利用。当输入数组中提供的所有
承诺
自行解析时，此方法将解析

我还使用它来处理状态更改。看看如何使用
useState
和
useffect
挂钩处理状态

无论如何，下面是代码示例：


我希望它能有所帮助。
ItemId在控制台中显示什么？另外，最好只将它们添加到状态列表，而不是中间列表。尝试使用
this.setState（{initialList:[…this.state.initialList，{//item data}]}）代替列表推送。
itemIds显示一个id数组。我用this.setState替换了push方法，但结果相同。ItemId在控制台中显示什么？另外，最好只将它们添加到状态列表，而不是中间列表。尝试使用
this.setState（{initialList:[…this.state.initialList，{//item data}]}）代替列表推送。
itemIds显示一个id数组。我用this.setState替换了push方法，但结果相同。谢谢，如果我想填充所有post
元数据，我会尝试它。我该怎么做？谢谢，如果我想填充所有post
元数据，我会尝试它。我该怎么做？
import React, { Component } from 'react';

import Navbar from '../components/Navbar/Navbar';
import Footer from '../components/Footer/Footer';
import Items from '../components/Items/Items';
import './App.css';
import axios from './axios-hn.js';

class App extends Component {
  state = {
    list: [],
    initialList: [],
    favoriteList: [],
    count: 0,
    favoriteCount: 0
  };

  async componentDidMount() {
    try {
      const fetchingData = await axios.get('topstories.json');
      const itemIds = await fetchingData.data;
      const list = [];
      itemIds.forEach((id) => {
        axios.get(`item/${id}.json`).then((res) =>
          list.push({
            id: res.data.id,
            title: res.data.title,
            score: res.data.score,
            url: res.data.url,
            author: res.data.by
          })
        );
      });
      this.setState({ initialList: list });
    } catch (err) {
      console.error(err);
    }
  }