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

Question

我复制了 Hacker News Search，但当我进入我的网站时无法显示 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端点returns列表postids。然后，您需要将每个 id 解析为它自己的 post。为简化这一点，您可以利用 Promise.all API。此方法在输入数组中提供的所有 promises 自行解析时解析。

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

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

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

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

How to display all stories from the Hacker News API on my React app when loading the website?

javascript

frontend

reactjs

axios

hacker-news-api