table表格里每一行数据最后有个操作，会打开一个模态框，通过接口进行数据得修改。可以给我个小demo吗？用react hooks

好的，以下是一个简单的 React Hooks 实现的 Demo，实现了你提到的功能，希望能对你有所帮助：

import React, { useState } from 'react';
import axios from 'axios';

const Table = () => {
  const [data, setData] = useState([
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 25 },
    { id: 3, name: '王五', age: 30 }
  ]);
  const [currentData, setCurrentData] = useState(null);
  const [showModal, setShowModal] = useState(false);
  const [formData, setFormData] = useState({});

  const handleEdit = (rowData) => {
    setCurrentData(rowData);
    setShowModal(true);
    setFormData(rowData);
  };

  const handleSave = () => {
    axios.put(`/api/data/${formData.id}`, formData).then(() => {
      const newData = data.map((item) => {
        if (item.id === formData.id) {
          return formData;
        }
        return item;
      });
      setData(newData);
      setShowModal(false);
      setCurrentData(null);
      setFormData({});
    });
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>
                <button onClick={() => handleEdit(item)}>编辑</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {showModal && (
        <div className="modal">
          <div className="modal-content">
            <h2>编辑数据</h2>
            <div>
              <label>ID：</label>
              <input
                type="text"
                value={formData.id}
                onChange={(e) =>
                  setFormData({ ...formData, id: parseInt(e.target.value) })
                }
              />
            </div>
            <div>
              <label>姓名：</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
              />
            </div>
            <div>
              <label>年龄：</label>
              <input
                type="text"
                value={formData.age}
                onChange={(e) =>
                  setFormData({ ...formData, age: parseInt(e.target.value) })
                }
              />
            </div>
            <div className="modal-actions">
              <button onClick={() => setShowModal(false)}>取消</button>
              <button onClick={handleSave}>保存</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Table;

以上代码中，我们定义了一个 `Table` 组件，其中 `data` 表示表格中的数据，`currentData` 表示当前编辑的数据行，`showModal` 表示模态框是否显示，`formData` 表示模态框中表单的数据。

在表格中，我们为每个操作按钮绑定了一个 `handleEdit` 方法，该方法会将当前行的数据传递给模态框组件，并将模态框显示出来。当用户在模态框中对数据进行修改并点击保存时，会发送一个 PUT 请求到后端服务器，同时更新前端的 `data` 数据，关闭模态框。

注意，此处的请求是使用 axios 库发送的，你需要按照实际情况修改请求地址和参数。另外，模态框的样式和交互方式也需要根据具体需求进行修改。