MySQL填充HTML表格时出现重复数据问题求助

嗨，这个问题我之前做项目的时候也碰到过，大概率是多表关联查询产生了笛卡尔积，或者前端渲染逻辑没做分组处理导致的，咱们一步步来捋清楚解决思路：

1. MySQL查询语句的关联错误 #

如果你的数据是从多张表（比如测试表test和项目表project）关联查询来的，最常见的问题就是关联条件不对或者用了错误的关联类型：

• 比如直接写了无关联条件的交叉连接：SELECT test.name, project.code FROM test, project，这会直接生成笛卡尔积，每个测试项都会和所有项目匹配，自然重复显示。
• 或者用了LEFT JOIN但关联字段有重复值，比如project表中同一个test_id对应了重复的项目编码，也会导致测试项被重复输出。
• 另外，当添加Test2时，如果查询语句没加筛选条件（比如没限定WHERE test.name = 'Test2'），就会把所有测试项的数据都查出来，导致Test2里混进Test1的内容。

2. 前端渲染未做分组处理 #

假设你的查询结果已经是每条测试项对应多个项目的多行数据（比如Test1和P20、Test1和P21...），但前端直接循环每一行渲染，就会重复显示Test1，没有做合并处理。

1. 修正MySQL查询语句 #

方法一：用分组合并项目编码 #

如果想让每个测试项只出现一次，把对应的项目编码合并成一个列表，可以用GROUP_CONCAT：

SELECT t.name, GROUP_CONCAT(p.code SEPARATOR ', ') AS project_list
FROM test t
LEFT JOIN project p ON t.id = p.test_id
-- 如果只查特定测试项，加筛选条件
-- WHERE t.name IN ('Test1', 'Test2')
GROUP BY t.id, t.name;

这样查询结果里每个测试项只有一行，project_list就是逗号分隔的所有对应项目编码。

方法二：确保关联条件精准 #

如果需要保留每个项目的单独行，但避免无关重复，一定要保证关联条件是两张表的正确外键关联，比如test.id = project.test_id，同时检查project表中是否有重复的test_id + code数据，必要时去重：

SELECT DISTINCT t.name, p.code
FROM test t
JOIN project p ON t.id = p.test_id
WHERE t.name = 'Test2';

2. 前端渲染时做分组合并 #

如果想在表格里让Test1只显示一次，对应多行项目（用rowspan合并单元格），可以先在前端整理数据：
比如用JavaScript把查询到的数组分组：

// 假设后端返回的数据是：
const rawData = [
  { name: 'Test1', code: 'P20' },
  { name: 'Test1', code: 'P21' },
  { name: 'Test2', code: 'P20' }
];

// 分组处理
const groupedData = Object.values(rawData.reduce((acc, item) => {
  if (!acc[item.name]) {
    acc[item.name] = { name: item.name, projects: [] };
  }
  acc[item.name].projects.push(item.code);
  return acc;
}, {}));

然后渲染的时候，对每个分组：

• 渲染测试项单元格时设置rowspan为对应项目的数量
• 循环渲染项目行，这样Test1就只会显示一次，对应所有项目

3. 检查数据库原始数据 #

最后也可以排查下数据库里的原始数据：

• 用SELECT * FROM test WHERE name = 'Test1';看看Test1是不是被重复插入了
• 用SELECT * FROM project WHERE test_id = (SELECT id FROM test WHERE name = 'Test1');看看对应项目有没有重复记录

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