首页 > 解决方案 > 使用 reactjs 渲染 JSON 数据(来自 reddit API)

问题描述

对 React 来说非常新,所以我可能会以错误的方式处理这个问题......我希望我的应用程序从文本输入字段中获取输入,从 reddit API 检索 JSON(url 是从文本输入构建的),然后呈现来自 JSON 的数据,循环遍历每个条目。我正在使用 useState 来触发数据渲染。我可以成功检索数据并输出特定值,但我希望能够有一个循环将数据动态输出到各种 HTML 元素中。

这是我到目前为止所拥有的,可以让我输出一些特定的值作为示例:

import React, { useState } from 'react';

const App = () => {
  const [retrievedData, setRetrievedData] = useState([])
  
  const runSearch = async() => {
    const searchInput = document.getElementById('searchInput').value
    const searchUrl = 'https://www.reddit.com/r/' + searchInput + '/new/.json?limit=5'
    const response = await fetch(searchUrl)
    const redditResponse = await response.json()

    setRetrievedData(<>
    <p>{JSON.stringify(redditResponse.data.children[0].data.author)}</p>
    <p>{JSON.stringify(redditResponse.data.children[0].data.title)}</p>
    </>)
  }

  return (
    <>
      <section>
        <input type="text" id='searchInput' placeholder='Enter a subreddit...'></input>
        <button onClick={runSearch}>
          Get Data
        </button>
        <div>{retrievedData}</div>
      </section>
    </>
  );
};

export default App;

下面是一个从 reddit API 中检索到的 JSON 示例,只是去掉了我在上面的代码中使用的示例值:

{
  "kind": "Listing",
  "data": {
    "modhash": "",
    "dist": 5,
    "children": [
      {
        "kind": "t3",
        "data": {
          "author": "author1",
          "title": "title1"
        }
      },
      {
        "kind": "t3",
        "data": {
          "author": "author2",
          "title": "title2"
        }
      },
      {
        "kind": "t3",
        "data": {
          "author": "author3",
          "title": "title3"
        }
      },
      {
        "kind": "t3",
        "data": {
          "author": "author4",
          "title": "title4"
        }
      },
      {
        "kind": "t3",
        "data": {
          "author": "author5",
          "title": "title5"
        }
      }
    ],
    "after": "t3_jnu0ik",
    "before": null
  }
}

我只需要最终渲染的输出是这样的:

<h2>TITLE 1</h2>
<h4>AUTHOR 1</h4>
<p>SELFTEXT 1</p>

...并为检索到的每个帖子数据重复。

我已经看到了各种不同的方式来呈现 JSON 数据,其中许多都显示了循环和/或 .map() 方法,但我似乎无法让它们工作,并且想知道这是否是一个问题使用状态。也许有某种方式我应该以其他方式呈现数据?

标签: javascriptjsonreactjs

解决方案


您不需要设置jsx状态,您可以直接迭代子数据map

尝试这个

const App = () => {
  const [retrievedData, setRetrievedData] = useState([])
  
  const runSearch = async() => {
    const searchInput = document.getElementById('searchInput').value
    const searchUrl = 'https://www.reddit.com/r/' + searchInput + '/new/.json?limit=5'
    const response = await fetch(searchUrl)
    const redditResponse = await response.json()
    if (redditResponse.data.children && redditResponse.data.children.length) {
      setRetrievedData(redditResponse.data.children)
    }
  }

  return (
    <>
      <section>
        <input type="text" id='searchInput' placeholder='Enter a subreddit...'></input>
        <button onClick={runSearch}>
          Get Data
        </button>
        <div>
          {
            retrievedData.map((children, index) => {
              return (
                <div key={children.data.author + index}>
                  <div>Kind: { children.kind }</div>
                  <div>Author: { children.data.author }</div>
                  <div>Title: { children.data.title }</div>
                </div>
              )
            })
          }
        </div>
      </section>
    </>
  );
};

推荐阅读