javascript - 使用 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() 方法,但我似乎无法让它们工作,并且想知道这是否是一个问题使用状态。也许有某种方式我应该以其他方式呈现数据?
解决方案
您不需要设置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>
</>
);
};
推荐阅读
- c - 为什么 signal() 的结果会转换为 (void)?
- postgresql - systemctl status postgresql.service 以不同方式显示输出
- mysql - 我有一个循环数据的 SQL 查询
- javascript - 在 Map JS 中应用正则表达式
- javascript - 无法点击元素
- reactjs - 为什么我在启动我的 React 应用程序时收到错误“[Error: std::bad_alloc]”?
- oracle - SYS_REFCURSOR 正在返回表中的所有行而不考虑 IN 参数
- .net - 通过 - Azure Devops Pipeline 将 Swagger JSON 导入 Azure 现有 API 管理
- php - 由于通知错误,无法访问 api 数据
- c# - 我们如何防止上传更改了扩展名的文件?