使用Material UI渲染员工表格时，所有行显示同一邮箱的问题

你在匹配员工和对应用户邮箱时，犯了一个关键的匹配字段错误：

• 你明确提到员工拥有包含关联用户ID的user属性，但在EnhancedTable组件的map方法里，错误地用员工自身的id去匹配用户的id（users.find((user) => user.id === item.id)），而非员工的user属性（关联的用户ID）。

这种情况下，如果存在员工id与第一个用户id相同的情况，所有行都会匹配到同一个用户，导致渲染出相同的邮箱；如果没有匹配项，find返回undefined，直接访问.email还会引发报错。

修正方案 #

将匹配条件改为用员工的user属性（关联用户ID）去匹配用户的id，同时增加数据加载完成的判断和容错处理：

useEffect(() => {
  // 同时判断员工和用户数据是否加载完成
  if (employees.length > 0 && users.length > 0) {
    setRows(
      employees.map((item) => {
        // 用员工的user属性匹配对应的用户
        const matchedUser = users.find((user) => user.id === item.user);
        return createData(
          item.name,
          item.lastName,
          // 容错处理：找不到关联用户时显示默认文本
          matchedUser ? matchedUser.email : '无关联邮箱',
          item._id,
          item.type,
          item.sales
        )
      })
    );
  }
}, [employees, users]);

额外说明 #

• 增加users.length > 0的判断，避免用户数据未加载完成时执行find返回undefined，进而引发访问.email的报错。
• 新增的容错逻辑，能在员工未关联用户时显示友好提示，提升页面稳定性。

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