使用DataGrid和axios在react js中实现加载、更新和删除函数

npm install react axios

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import DataGrid from 'your-datagrid-library'; // 替换为你使用的DataGrid库

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

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('your-api-endpoint'); // 替换为你的API端点
      setData(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <DataGrid data={data} />
    </div>
  );
};

export default MyComponent;

const updateData = async (id, newData) => {
  try {
    await axios.put(`your-api-endpoint/${id}`, newData); // 替换为你的更新接口
    fetchData(); // 更新数据后重新获取最新数据
  } catch (error) {
    console.error(error);
  }
};

const deleteData = async (id) => {
  try {
    await axios.delete(`your-api-endpoint/${id}`); // 替换为你的删除接口
    fetchData(); // 删除数据后重新获取最新数据
  } catch (error) {
    console.error(error);
  }
};

<DataGrid
  data={data}
  columns={[
    // 其他列配置...
    {
      header: '操作',
      render: (rowData) => (
        <div>
          <button onClick={() => updateData(rowData.id, rowData)}>编辑</button>
          <button onClick={() => deleteData(rowData.id)}>删除</button>
        </div>
      ),
    },
  ]}
/>