React表中顯示JSON數(shù)據(jù)demo

更新時間：2022年12月13日 15:45:03 作者：Jovie

這篇文章主要為大家介紹了React表中顯示JSON數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

可能每個網(wǎng)站都會以這樣或那樣的方式消耗數(shù)據(jù)。最常見的情況是，你會遇到需要在表中顯示數(shù)據(jù)的情況。

在本教程中，我們將研究如何獲取JSON數(shù)據(jù)并將其顯示在一個表中。

讓我們開始吧!

項目設置

通過在你的機器上創(chuàng)建react app或打開瀏覽器并訪問react.new來開始。

一個新的CodeSandbox環(huán)境將打開，并設置了React項目。

從API獲取數(shù)據(jù)

在React中，有很多方法來獲取數(shù)據(jù)，但在本教程中，我們將使用**fetch()**函數(shù)來獲取假的JSON數(shù)據(jù)。

我們將使用一個假的JSON APIdummyjson.com/products，它返回隨機產(chǎn)品的數(shù)據(jù)，然后我們將使用這些數(shù)據(jù)在我們的表中顯示：

// 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鉤子中獲取數(shù)據(jù)，這樣它就只在初始渲染時加載數(shù)據(jù)。你可以在這里了解更多關于如何在React中獲取數(shù)據(jù)

運行React應用程序，你會在瀏覽器的控制臺中看到數(shù)據(jù)：

接下來，我們將看到如何在一個表中顯示這些數(shù)據(jù)。

在React中創(chuàng)建一個表

在JSX里面創(chuàng)建一個普通的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;

現(xiàn)在，我們將利用useState鉤子來存儲我們獲取的所有數(shù)據(jù)。鉤子中的 數(shù)據(jù)變量是一個空數(shù)組，由 setData函數(shù)進一步更新。

// 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;

在這段代碼中，我們正在映射數(shù)據(jù)數(shù)組，其中包含我們獲取的所有數(shù)據(jù)，并將其顯示在表格中?，F(xiàn)在運行React應用程序并打開你的瀏覽器。

這里是最終的結果。