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

Question

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

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

github 存储库:https://github.com/vnsteven/hacker-news-react

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

我的 App.js 文件的开头 (src/containers/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 。当输入数组中提供的所有 promise 自行解析时，此方法就会解析。

我也在使用"React Hooks"处理状态变化。了解如何使用 useState 和 useEffect Hook 处理状态。

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

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