React表中显示JSON数据demo
引言
可能每个网站都会以这样或那样的方式消耗数据。最常见的情况是，你会遇到需要在表中显示数据的情况。
在本教程中，我们将研究如何获取JSON数据并将其显示在一个表中。
让我们开始吧!
项目设置
通过在你的机器上创建react app或打开浏览器并访问react.new来开始。
一个新的CodeSandbox环境将打开，并设置了React项目。
从API获取数据
在React中，有很多方法来获取数据，但在本教程中，我们将使用**fetch()**函数来获取假的JSON数据。
我们将使用一个假的JSON APIdummyjson.com/products，它返回随机产品的数据，然后我们将使用这些数据在我们的表中显示：
// App.js
import { useEffect } from "react";
import "./App.css";
function App() {
useEffect(() => {
fetch(`https://dummyjson.com/products`)
.then((response) => response.json())
.then((actualData) => console.log(actualData))
.catch((err) => {
console.log(err.message);
});
}, []);
return (
<div>
<p>Hello, world!</p>
</div>
);
}
export default App;
在这段代码中，我们在useEffect钩子中获取数据，这样它就只在初始渲染时加载数据。你可以在这里了解更多关于如何在React中获取数据
运行React应用程序，你会在浏览器的控制台中看到数据：
接下来，我们将看到如何在一个表中显示这些数据。
在React中创建一个表
在JSX里面创建一个普通的HTML表格。我们也可以使用react-table库，它有一堆可用的功能，但为了本教程的目的，我们将使用普通的表格。
// App.js
import { useEffect, useState } from "react";
import "./App.css";
function App() {
useEffect(() => {
fetch(`https://dummyjson.com/products`)
.then((response) => response.json())
.then((actualData) => {
console.log(actualData);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
<div>
<tbody>
<tr>
<th>Name</th>
<th>Brand</th>
<th>Image</th>
<th>Price</th>
<th>Rating</th>
</tr>
</tbody>
</div>
);
}
export default App;
现在，我们将利用useState钩子来存储我们获取的所有数据。钩子中的 数据变量是一个空数组，由 setData函数进一步更新。
// App.js
import { useEffect, useState } from "react";
import "./App.css";
function App() {
const [data, setData] = useState([]);
const fetchData = () => {
fetch(`https://dummyjson.com/products`)
.then((response) => response.json())
.then((actualData) => {
console.log(actualData);
setData(actualData.products);
console.log(data);
})
.catch((err) => {
console.log(err.message);
});
};
useEffect(() => {
fetchData();
}, []);
return (
<div>
<tbody>
<tr>
<th>Name</th>
<th>Brand</th>
<th>Image</th>
<th>Price</th>
<th>Rating</th>
</tr>
{data.map((item, index) => (
<tr>
<td>{item.title}</td>
<td>{item.brand}</td>
<td>
<img src="{item.thumbnail}" alt="" height="{100}" />
</td>
<td>{item.price}</td>
<td>{item.rating}</td>
</tr>
))}
</tbody>
</div>
);
}
export default App;
在这段代码中，我们正在映射数据数组，其中包含我们获取的所有数据，并将其显示在表格中。现在运行React应用程序并打开你的浏览器。
这里是最终的结果。
结论
在表格中显示JSON数据并不是一项困难的任务，但许多开发者都在努力寻找完美的方法来实现它。在本教程中，我们研究了如何从API中获取JSON数据并在表中显示。现在，请继续努力，让它变得漂亮。
以上就是React表中显示JSON数据demo的详细内容，更多关于React表显示JSON数据的资料请关注脚本之家其它相关文章！
相关文章
详解如何使用React和MUI创建多选Checkbox树组件
这篇文章主要为大家详细介绍了如何使用 React 和 MUI（Material-UI）库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下2024-01-01
react16.8.0以上MobX在hook中的使用方法详解
这篇文章主要为大家介绍了react16.8.0以上MobX在hook中的使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了React构建简洁强大可扩展的前端项目架构实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了React 程序设计简单的轻量级自动完成搜索框应用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本篇文章主要介绍了快速搭建React的步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了React实现监听粘贴事件并获取粘贴板中的截图方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
antd是react流行的ui框架库，本文主要介绍了react antd实现动态增减表单，分享给大家，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了react diff算法源码解析的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家详细介绍了React tsx生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了React Native集成支付宝支付的实现现,ativeModules是JS代码调用原生模块的桥梁。所以，我们只需要在原生工程中集成支付宝和微信支付的sdk，然后使用NativeModules调用即可，需要的朋友可以参考下2022-02-02
最新评论