如何在JS的.find()中验证多条件，合并显示客户/供应商名称？

核心思路 #

在渲染表格列时，先尝试通过contact_id_customer从contactNames数组中查找客户名称，如果未找到匹配项，再通过contact_id_provider查找供应商名称；若业务需求是优先显示供应商，调换顺序即可。这样就能保证同一列显示对应角色的名称。

示例代码实现 #

假设你的contactNames数组结构如下：

const contactNames = [
  { id: 'cust_123', name: 'XX科技有限公司' },
  { id: 'prov_456', name: 'YY通信服务商' },
  // ...更多联系人数据
];

在CDRTable组件的列定义中，修改该列的渲染逻辑：

// 表格列配置示例
const columns = [
  // ...其他列
  {
    title: '关联方名称',
    dataIndex: '', // 无需绑定固定dataIndex，自定义渲染
    render: (record) => {
      // 优先查找客户名称
      const customer = contactNames.find(item => item.id === record.contact_id_customer);
      if (customer) {
        return customer.name;
      }
      // 客户不存在则查找供应商名称
      const provider = contactNames.find(item => item.id === record.contact_id_provider);
      return provider ? provider.name : '未知';
    },
  },
  // ...其他列
];

性能优化建议 #

如果contactNames数据量较大，多次调用find()会影响性能，可以先将contactNames转换为以id为键的对象，把查找效率从O(n)降到O(1)：

// 在组件初始化或contactNames更新时转换
const contactMap = useMemo(() => {
  return contactNames.reduce((map, item) => {
    map[item.id] = item.name;
    return map;
  }, {});
}, [contactNames]);

// 渲染逻辑简化为：
render: (record) => {
  return contactMap[record.contact_id_customer] 
    || contactMap[record.contact_id_provider] 
    || '未知';
}

问题排查点 #

你之前的写法只返回供应商名称，大概率是查找顺序写反或判断逻辑有误（比如后查找的结果覆盖了先查找的客户名称）。检查原代码是否存在类似错误：

// 错误示例：先找供应商，后找客户，但客户结果被覆盖
let name = contactNames.find(item => item.id === record.contact_id_provider)?.name;
name = contactNames.find(item => item.id === record.contact_id_customer)?.name || name;
// 正确顺序应为先客户后供应商

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