使用 React 从 Reddit API 渲染信息

Question

我正在尝试构建一个基本的网络应用程序，用户可以在其中使用 Reddit API 搜索 subreddits。 但是，虽然我可以 console.log 从 API 获取我需要的数据，但我似乎不知道如何显示它。

import React, { useState, useEffect } from "react";
import Amplify, { API, graphqlOperation } from "aws-amplify";
import aws_exports from "./aws-exports";
import { withAuthenticator, AmplifySignOut }  from '@aws-amplify/ui-react';
import awsconfig from "./aws-exports";
import './App.css'
import axios from 'axios'
import CharacterGrid from './components/CharacterGrid'
import SearchBar from './components/SearchBar'

Amplify.configure(awsconfig); 

const App = () => {
 
  const [items, setItems] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')

  useEffect(() => {
    const fetchItems = async () => {
      setIsLoading(true)
      const result = await axios(
        `https://www.reddit.com/subreddits/search.json?q=${query}`
      )

      setItems(result.data)
      setIsLoading(false)
    }

   fetchItems()
  }, [query])

  return (
    <div className='container'>
      <AmplifySignOut/>
      <SearchBar style={{ marginTop: "6%" }}  getQuery={(q) => setQuery(q)} />
      <CharacterGrid isLoading={isLoading} items={items} />
    </div>
  )
}

export default withAuthenticator(App)

子组件CharacterGrid 如下所示：

import React from 'react'
import CharacterItem from './CharacterItem'

const CharacterGrid = ({items, isLoading}) => {

  return 
    isLoading 
      ? (<h1>Loading ...</h1>) 
      : (
        <section className='cards'>
          <p>{items.data}</p> //this does not work
          <p>{items.children}</p> //this does not work either
        </section>
      )
}

export default CharacterGrid 

我想要做的就是显示从 API 返回的用户输入的查询字符串的 subreddits 的名称。我哪里错了？我也尝试过转换为 JSON，并使用 .map() 映射响应，但无论我尝试什么，我都会遇到错误。我哪里错了？

Answer 1

但是，虽然我可以从 API 控制台记录我需要的数据，但我似乎无法弄清楚如何显示它。

因为 Reddit API 返回一个 subreddits 数组，你应该使用 map() 函数到 iterate over the array and convert each item into React element。

items.map(i => (
  <li key={i.data.display_name_prefixed}>
    {i.data.display_name}
  </li>
))

我要做的就是显示从 API 返回的用户输入的查询字符串的 subreddits 的名称。

您需要自己检查数据架构并正确抓取响应。

---

这是工作示例：

const { useState, useEffect } = React;

const App = () => {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [query, setQuery] = useState("");

  useEffect(() => {
    setIsLoading(true);

    if (query.length >= 3) {
      axios(`https://www.reddit.com/subreddits/search.json?q=${query}`)
        .then(response => setItems(response.data.data.children))
        .catch(error => console.log("Error", error));
    }

    setIsLoading(false);
  }, [query]);

  return (
    <div>
      <input type="text" value={query} onChange={e => setQuery(e.target.value)} />
      <CharacterGrid items={items} isLoading={isLoading} />
    </div>
  );
}

const CharacterGrid = ({ items, isLoading }) => {
  return isLoading ? (
    <h1>Loading ...</h1>
  ) : (
    <ul>
      {items.map(i => (
        <li key={i.data.display_name_prefixed}>
          {i.data.display_name} ({i.data.display_name_prefixed})
        </li>
      ))}
    </ul>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="root"></div>

Answer 2

为了循环遍历元素，例如：打印标题，您可以执行以下操作。

items.data.children.map(child => <p> child.data.title </p>)

根据reddit提供的回复， reddit response