React如何根据客户ID将对应分配用户的用户名渲染至对应表格行

问题根因 #

你的过滤逻辑存在类型匹配错误：customers_id是存储多客户ID的数组类型，直接和单值的客户IDi.id做相等判断，永远不会返回正确的匹配结果，因此过滤得到的结果不符合预期。另外assigneduser本身就是数组结构，不需要调用Object.values()做额外转换。

修复方案 #

1. 修正过滤逻辑

使用数组的includes()方法判断当前客户ID是否存在于对应用户的customers_id列表中：

let assigneduserfilter = assigneduser.filter(
  ({ customers_id }) => customers_id.includes(i.id)
);

2. 修正渲染逻辑

key属性不要用数组类型的customers_id，改用用户唯一标识user_id避免React警告：

{assigneduserfilter.map((z) => (
  <td key={z.user_id}>{z.username}</td>                    
))}

优化方案（单客户绑定单用户场景）

如果你的业务规则是1个客户只会分配给1个用户，不需要用到filter+map的组合，直接用find匹配后渲染即可，逻辑更简洁高效：

// 遍历客户行时先匹配对应用户
const matchedUser = assigneduser.find(({ customers_id }) => customers_id.includes(i.id))
// 直接渲染单元格
<td>{matchedUser ? matchedUser.username : '未分配'}</td>

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