使用reactjs渲染JSON数据（来自reddit API）

Question

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(<>

    <>{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

  }

}

我见过各种不同的渲染 JSON 数据的方法，其中许多显示循环和/或 .map() 方法，但我似乎无法让这些方法工作，并想知道这是否是一个问题使用状态。也许我应该以其他方式呈现数据？

Answer 1

您不需要设置jsx状态，您可以直接迭代子数据map尝试这个const App = () => {&nbsp; const [retrievedData, setRetrievedData] = useState([])&nbsp;&nbsp;&nbsp; const runSearch = async() => {&nbsp; &nbsp; const searchInput = document.getElementById('searchInput').value&nbsp; &nbsp; const searchUrl = 'https://www.reddit.com/r/' + searchInput + '/new/.json?limit=5'&nbsp; &nbsp; const response = await fetch(searchUrl)&nbsp; &nbsp; const redditResponse = await response.json()&nbsp; &nbsp; if (redditResponse.data.children && redditResponse.data.children.length) {&nbsp; &nbsp; &nbsp; setRetrievedData(redditResponse.data.children)&nbsp; &nbsp; }&nbsp; }&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id='searchInput' placeholder='Enter a subreddit...'></input>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={runSearch}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Get Data&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; retrievedData.map((children, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={children.data.author + index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Kind: { children.kind }</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Author: { children.data.author }</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Title: { children.data.title }</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; </>&nbsp; );};