Ant Design Table编辑删除功能未同步至PG数据库及TypeScript类型错误求助

我来帮你一步步解决这两个核心问题：TypeScript类型报错和数据不持久化的问题。

一、先搞定TypeScript的Align类型错误 #

这个报错是因为Ant Design Table的ColumnType里，align属性的类型是严格的联合类型'left' | 'right' | 'center'（也就是AlignType），而你直接给了普通的string类型，TypeScript不允许这种宽松的类型赋值。有两种简单的解决方式：

方式1：断言为正确的字面量类型 #

不需要额外导入，直接在列定义里把align的值用as const断言成字面量：

{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
  align: 'center' as const, // 关键点：用as const固定类型
  editable: true,
}

方式2：导入AlignType并明确类型 #

先导入对应的类型：

import type { ColumnType, AlignType } from 'antd/es/table';

然后在列定义里指定align的类型：

{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
  align: 'center' as AlignType,
  editable: true,
}

另外注意你代码里title: 'Name' as string这种写法是多余的，字符串字面量本身就是string类型，直接删掉这个断言就行。

二、解决CRUD操作不持久化到数据库的问题 #

你现在的编辑和删除只修改了前端的gridData状态，完全没和后端API交互，所以刷新页面后，数据会重新从数据库拉取，自然回到初始状态。需要在操作时同步调用后端接口：

1. 完善保存（编辑）逻辑 #

修改save函数，先调用PUT接口把修改后的数据提交到数据库，成功后再更新前端状态：

const save = async key => {
  try {
    const row = await form.validateFields();
    const newData = [...modifiedData];
    const index = newData.findIndex(item => key === item.key);
    if (index > -1) {
      const item = newData[index];
      const updatedItem = { ...item, ...row };
      
      // 关键步骤：调用后端PUT接口更新数据
      await axios.put(`${apiUrl}/${item.id}`, updatedItem);
      
      // 更新前端状态
      newData.splice(index, 1, updatedItem);
      setGridData(newData);
      setEditingKey('');
    }
  } catch (error) {
    console.warn('保存失败:', error);
    // 可以加个用户提示，比如用Antd的message组件
    // message.error('保存失败，请稍后重试');
  }
};

2. 完善删除逻辑 #

修改handleDelete函数，先调用DELETE接口删除数据库中的数据，成功后再更新前端列表：

const handleDelete = async value => {
  try {
    // 关键步骤：调用后端DELETE接口删除数据
    await axios.delete(`${apiUrl}/${value.id}`);
    
    // 更新前端状态
    const filteredData = gridData.filter(item => item.id !== value.id);
    setGridData(filteredData);
  } catch (error) {
    console.warn('删除失败:', error);
    // message.error('删除失败，请稍后重试');
  }
};

3. 额外优化建议 #

• 缓存modifiedData：你现在每次渲染都重新生成modifiedData，可以用useMemo缓存起来，提升性能：

  import { useMemo } from 'react';
  
  const modifiedData = useMemo(() => gridData.map(item => ({ ...item, key: item.id })), [gridData]);
  

• 简化Edit方法：你当前的edit方法里先设置一堆空字符串，然后又被...record覆盖，完全没必要，直接改成：

  const edit = record => {
    form.setFieldsValue(record);
    setEditingKey(record.key);
  };
  

• 检查Axios导入：你的代码里用了axios但没看到导入，记得加上：

  import axios from 'axios';
  

三、收尾检查 #

确保你的后端API（api/terminals）已经实现了PUT和DELETE接口，并且能正确处理请求。这样修改后，编辑和删除操作就会同步到PostgreSQL数据库，刷新页面后数据也会保持修改后的状态。

内容的提问来源于stack exchange，提问作者Joca