如何在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

要在Material-UI数据网格中显示JSON文件中的数据，可以使用"useState"one_answers";useEffect"钩子从JSON文件中获取数据，并将其存储在状态变量中。然后，您可以将这个状态变量作为道具传递给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"状态变量。

最后，MUIDataTable"组件呈现，并且"数据";状态变量作为道具传递给组件，以便它可以显示在数据网格中。