如何更新本地json文件

Question

我有一个包含以下数据的 json 文件：

[
  {
    "Short_Name": "GRID1",
    "Name": "Grid",
    "Description": "Utility Grid",
    "Type": "Utility Grid"
  },
  {
    "Short_Name": "PV1",
    "Name": "PV Rooftop",
    "Description": "PV at S1 Rooftop",
    "Type": "Solar"
  },
  {
    "Short_Name": "BAT1",
    "Name": "Battery (Simulation)",
    "Description": "Battery at Rooftop S1",
    "Type": "Battery"
  },
  {
    "Short_Name": "BAT2",
    "Name": "Battery L5",
    "Description": "Battery at Rooftop S2",
    "Type": "Battery"
  },
  {
    "Short_Name": "GAS2",
    "Name": "Gas Engine (Simulation)",
    "Description": "Gas Engine at S1",
    "Type": "Gas Engine"
  },
  {
    "Short_Name": "CHL1",
    "Name": "Electrical Chiller",
    "Description": "Electrical Chiller at S1",
    "Type": "Electrical Chiller"
  },
  {
    "Short_Name": "ABCHL1",
    "Name": "AB Chiller",
    "Description": "AB Chiller at S1",
    "Type": "AB Chiller"
  },
  {
    "Short_Name": "THS1",
    "Name": "Thermal Storage",
    "Description": "Thermal Storage at S1",
    "Type": "Thermal Storage"
  },
  {
    "Short_Name": "THS2",
    "Name": "Thermal Storage",
    "Description": "Thermal Storage at S2",
    "Type": "Thermal Storage"
  }
]

我正在使用 Syncfusion 使用上述 json 文件创建网格。当我在网格中添加一行新数据时，我希望数据也能在本地 json 文件中更新。例如，如果我在反应网格中添加一行新数据，我希望 json 文件在现有数据之上显示类似这样的内容（因此它将成为新的第 10 项）

{
    "Short_Name": "GRID2",
    "Name": "Grid",
    "Description": "Utility Grid",
    "Type": "Utility Grid"
  }, 

我的grid jsx文件如下：

import React, { useState, useEffect } from "react";
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-grids";
import { Edit, Inject, Toolbar, Page, Group, Print } from "@syncfusion/ej2-react-grids";

import { Header } from "../../components";

import { useStateContext } from "../../contexts/ContextProvider";

const Grid = () => {
  const { currentMode } = useStateContext();
  const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel", "Search", "Print"];
  const editOptions = {
    allowEditing: true,
    allowAdding: true,
    allowDeleting: true,
    mode: "Normal",
  };

  const [gridData, setGridData] = useState([]);
  const getData = () => {
    fetch("./data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(function (response) {
        console.log(response);
        return response.json();
      })
      .then(function (data) {
        console.log(data);
        setGridData(data);
      });
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <div style={{ margin: "3%", marginTop: "5%", marginBottom: "5%" }}>
      <Header category='Grid' title='' />

      <GridComponent
        dataSource={gridData}
        toolbar={toolbarOptions}
        allowPaging={true}
        editSettings={editOptions}
        pageSettings={{ pageSize: 10 }}
        allowGrouping={true}
        height={265}
        background={currentMode === "Dark" ? "#33373E" : "#fff"}
      >
        <ColumnsDirective>
          <ColumnDirective
            field='Short_Name'
            headerText='Short Name'
            textAlign='Center'
            width='100'
          />
          <ColumnDirective field='Name' headerText='Name' textAlign='Right' width='100' />
          <ColumnDirective
            field='Description'
            headerText='Description'
            textAlign='Right'
            width='100'
          />
          <ColumnDirective field='Type' headerText='Type' textAlign='Right' width='100' />
          {/* <ColumnDirective field='Site' headerText='Site' textAlign='Right' width='100' /> */}
        </ColumnsDirective>
        <Inject services={[Page, Group, Edit, Toolbar, Print]} />
      </GridComponent>
    </div>
  );
};

export default Grid;