reactjs 如何在React应用中显示JSON文件中的信息？

这是我的交易页面的代码，在这里链接所有数据并设置我想要显示的数据。

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文件中获取信息，但我收到一个错误，好像它没有获取任何信息。

要在Material-UI数据网格中显示JSON文件中的数据，可以使用React中的“useState”和“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”组件，并将“data”状态变量作为prop传递给该组件，以便它可以显示在数据网格中。

reactjs 如何在React应用中显示JSON文件中的信息？

1条答案

相关问题

热门标签

最新问答