TypeScript 下 React Table 如何从多邮箱数据获取默认邮箱

React Table 的列配置中，accessor 字段本身支持两种传参模式：

• 传字符串：对应静态嵌套字段的路径映射，也就是你之前用的emailAddresses[0].email写法，这种模式只能做固定路径的取值，无法承载动态判断、数组遍历这类逻辑
• 传函数：接收当前行的原始数据作为入参，返回需要展示的字段值，完全可以兼容你之前写的默认邮箱提取逻辑，不需要在外层做额外的数据预处理

具体调整步骤 #

1. 把原来的字符串形式accessor替换为函数实现，直接将默认邮箱的提取逻辑写入函数内部
2. 优化原有过滤逻辑：因为默认邮箱理论上是唯一的，用find方法匹配isDefault === true的条目，比filter遍历完整数组再取第一项的效率更高，逻辑也更贴合场景
3. 补充边界兜底逻辑：避免遇到数组为空、无默认标记条目、字段缺失时出现渲染报错，保证表格展示稳定

可直接复用的配置代码 #

const columns: Array<any> = useMemo(
  () => [
    {
      Header: 'Email',
      accessor: (userRow) => {
        // 优先匹配标记为默认的邮箱
        const defaultEmailEntry = userRow.emailAddresses?.find(address => address.isDefault)
          // 兜底：如果没有标记默认的邮箱，取数组第一项，避免空值
          ?? userRow.emailAddresses?.[0];
        // 最终返回展示值，无有效内容时显示短横线，保持表格排版整齐
        return defaultEmailEntry?.email ?? '-';
      },
    },
  ],
  [],
);

适配说明 #

这种写法完全兼容React Table的所有内置能力：

• 配置完成后，表格的排序、列过滤、导出等功能拿到的都是提取好的默认邮箱值，不需要额外做适配
• 列级别的字段处理逻辑和表格配置放在同一处，不需要在外层对接口返回的原始数据做提前清洗，后续维护成本更低

小提示：你贴的原始接口数据结构存在语法缺失：emailAddresses数组少了闭合的]，外层用户对象也少了最终的}，实际使用时记得补全语法，避免接口数据解析报错。
注：这种函数形式的accessor是React Table v7及以上版本原生支持的能力，不需要引入额外插件。

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