加载网站时，如何在我的React应用程序上显示Hacker News API中的所有故事

Question

我已经制作了黑客新闻搜索的副本，但是当我进入网站时，我无法显示API的所有故事。根本没有故事。我必须在搜索栏上键入某些内容才能显示所有内容。

我已经用Axios获取了数据，我console.log收集了，看来数据已成功获取，因为我可以在控制台上看到集合。

github repo：https：//github.com/vnsteven/hacker-news-react

网站：https：//vnsteven.github.io/hacker-news-react/

我的app.js文件(src/containser/app.js(的开始：

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

Answer 1

这是您如何使用" Hackernews api"：

的示例

首先，TopStories端点返回邮政为ids的列表。然后，您需要将每个id解析到其自己的post中。为了简化这一点，您可以利用Promise.all API。当输入数组中提供的所有promises时，此方法可以解决。

。

我也在使用" React Hooks"处理状态变化。看一下如何使用useState和useEffect挂钩处理状态。

无论如何，这是代码示例：

https://codesandbox.io/embed/hackernews-top-10-posts-h73km