React+NodeJS+MySQL中POST接口自动生成ID的CRUD问题修复

问题根源 #

报错ER_TRUNCATED_WRONG_VALUE_FOR_FIELD是因为前端提交POST请求时，给整数类型的id字段传了空字符串，而数据库期望id由自身自动生成（自增），不需要客户端提供。

解决步骤 #

1. 确认MySQL表的id字段配置 #

确保mun_mis.darta表的id字段是自增主键，如果尚未配置，执行以下SQL语句修改表结构：

ALTER TABLE mun_mis.darta 
MODIFY COLUMN id INT PRIMARY KEY AUTO_INCREMENT;

2. 修改Express后端POST接口 #

在处理POST请求时，主动移除请求体中的id字段，避免空字符串被传入数据库：

app.post('/api/darta', async (req, res) => {
  // 解构移除id字段，只保留有效数据
  const { id, ...validData } = req.body;
  
  try {
    // 插入数据时不包含id，让数据库自动生成
    const [result] = await db.query('INSERT INTO darta SET ?', validData);
    // 返回自动生成的id和新增的数据
    res.status(201).json({ id: result.insertId, ...validData });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

3. 调整Material Table V2的前端配置 #

• 在列定义中设置id列为不可编辑，避免新增时组件自动传入空值：

const columns = [
  { 
    title: 'ID', 
    field: 'id', 
    editable: 'never' // 新增/编辑时都禁止修改ID
  },
  // 其他业务列配置...
];

• 在onRowAdd回调中，确保提交的数据不包含id字段：

<MaterialTable
  title="Darta 数据管理"
  columns={columns}
  data={tableData}
  editable={{
    onRowAdd: async (newRowData) => {
      // 删除newRowData中的id属性
      const { id, ...submitData } = newRowData;
      
      await fetch('/api/darta', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(submitData)
      });
      
      // 刷新表格数据逻辑
      // ...
    },
    // 其他编辑/删除回调配置...
  }}
/>

4. 验证结果 #

重启后端服务后，在前端尝试新增数据：

• 检查浏览器开发者工具的Network面板，确认POST请求的请求体中没有id字段
• 查看数据库，确认新数据的id已自动生成

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