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

在React.js中使用DataGrid和axios实现加载、更新和删除函数的步骤如下：

首先，确保你已经安装了React.js和axios库。你可以使用以下命令进行安装：

npm install react axios

在你的React组件中引入所需的库：

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;

在上述代码中，我们使用了React的useEffect钩子来在组件加载时调用fetchData函数，从服务器获取数据并将其存储在data状态中。然后，我们将数据传递给DataGrid组件进行展示。
接下来，我们可以添加更新和删除功能。假设你的API端点提供了相应的更新和删除接口，你可以在组件中添加相应的函数来处理这些操作。例如：

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组件中添加相应的按钮或操作来调用这些函数。例如，你可以在每一行的操作列中添加编辑和删除按钮：

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