如何在我的 React 應用程序中顯示來自 JSON 文件的信息？

Question

這是我的交易頁面代碼，這里鏈接所有數據並設置我想要顯示的數據。

import React, { useEffect, useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
import axios from "axios";
import F_data from "./FakeTransactions.json";

function DataGridForTransactions() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get(F_data).then((response) => {
      setData(response.data);
    });
  }, []);

  const columns = [
    { field: "transaction_id", headerName: "ID", width: 90 },
    { field: "amount", headerName: "Amount", width: 150 },
    { field: "transaction_type", headerName: "Type", width: 150 },
    { field: "description", headerName: "Description", width: 150 },
    { field: "transaction_date", headerName: "Date", width: 150 },
  ];

  const rows = data.map((row) => {
    return {
      transaction_id: row.transaction_id,
      amount: row.amount,
      transaction_type: row.transaction_type,
      description: row.description,
      transaction_date: row.transaction_date,
    };
  });

  console.log(data);
  return (
    <div style={{ height: 500, width: "flex" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOption={[5]}
      />
    </div>
  );
}
export default DataGridForTransactions;

它顯示數據網格，但不顯示包含信息的行。

這是 Json 文件：

"data": [
    {
      "transaction_id": "1",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-01",
      "transaction_type": "debit",
      "amount": -100.5,
      "description": "ATM withdrawal"
    },
    {
      "transaction_id": "2",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-02",
      "transaction_type": "credit",
      "amount": 50,
      "description": "Paycheck deposit"
    },
    {
      "transaction_id": "3",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-03",
      "transaction_type": "debit",
      "amount": -75,
      "description": "Online purchase"
    },
    {
      "transaction_id": "4",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-04",
      "transaction_type": "credit",
      "amount": 250,
      "description": "Gift from family"
    },
    {
      "transaction_id": "5",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-05",
      "transaction_type": "debit",
      "amount": -125,
      "description": "Grocery shopping"
    },
    {
      "transaction_id": "6",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-06",
      "transaction_type": "credit",
      "amount": 300,
      "description": "Investment return"
    },
    {
      "transaction_id": "7",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-07",
      "transaction_type": "debit",
      "amount": -50,
      "description": "Gasoline purchase"
    },
    {
      "transaction_id": "8",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-08",
      "transaction_type": "credit",
      "amount": 100,
      "description": "Groceries"
    },
    {
      "transaction_id": "9",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-09",
      "transaction_type": "credit",
      "amount": 100,
      "description": "Eating Out"
    },
    {
      "transaction_id": "10",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-10",
      "transaction_type": "credit",
      "amount": 100,
      "description": "Gasoline purchase"
    },
    {
      "transaction_id": "11",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-11",
      "transaction_type": "credit",
      "amount": 10,
      "description": "Candy"
    },
    {
      "transaction_id": "12",
      "account_number": "1234567890123456",
      "transaction_date": "2022-01-12",
      "transaction_type": "credit",
      "amount": 1000,
      "description": "Paycheck deposit"
    }
  ]
}

我在這里做錯了什么？

我正在鏈接所有內容並使用 Axios 從 JSON 文件中獲取信息，但我收到一個錯誤，就好像它沒有獲取任何信息一樣。

Answer 1

要在 88059137288 數據網格中顯示 JSON 文件中的數據，您可以使用 React 中的“useState”和“useEffect”掛鈎從 JSON 文件中獲取數據並將其存儲在 state 變量中。 然后，您可以將此 state 變量作為 prop 傳遞給 Material-UI 數據網格組件。 這是一個例子：

import { useState, useEffect } from 'react';
import axios from 'axios';
import MUIDataTable from 'mui-datatables';

function MyComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        axios.get('path/to/json/file')
            .then(response => setData(response.data))
            .catch(error => console.log(error));
    }, []);

    const columns = ["Name", "Age", "Address"];

    return (
        <MUIDataTable
            title={"Employee List"}
            data={data}
            columns={columns}
        />
    );
}

在上面的示例中， useEffect鈎子用於在首次呈現組件時從 JSON 文件中獲取數據。

“axios”庫用於向JSON文件發出GET請求，響應數據存儲在“data”state變量中。

最后，渲染“MUIDataTable”組件，並將“數據”state 變量作為 prop 傳遞給組件，以便它可以顯示在數據網格中。