React TypeScript项目中，Polaris Table如何在列定义中获取嵌套数组的Key值？

1. 先修正列定义的重复属性问题 #

你当前的value列重复声明了两次cell属性，这会导致后者覆盖前者，先删掉无效的那一行，保留正确的取值逻辑：

{
  id: "value",
  header: "Text value",
  cell: (row) => row.alt,
  sortingField: "alt",
}

2. 获取Key数组值的具体实现 #

要访问嵌套的Key数组，直接通过行数据对象的层级属性即可，同时可以根据需求处理数组（比如取第一个元素、拼接所有元素），以下是两种常见场景的代码示例：

场景1：添加新列展示Key值

{
  id: "key",
  header: "Key",
  // 直接通过嵌套属性获取数组，按需处理
  cell: (row) => {
    // 取数组第一个元素，为空时返回空字符串
    return row.parentObj.innerObj.Key[0] || '';
    // 如果需要展示所有数组元素，用join拼接：
    // return row.parentObj.innerObj.Key.join(', ');
  },
  // 若需支持排序，可设置sortingField（数组排序需额外处理逻辑）
  // sortingField: "parentObj.innerObj.Key"
}

场景2：在现有列中集成Key值

比如修改description列，同时展示描述和Key：

{
  id: "description",
  header: "Description",
  cell: (row) => `${row.description} (Key: ${row.parentObj.innerObj.Key[0]})`,
}

3. 优化TypeScript类型提示（可选） #

为了避免类型报错，建议定义行数据的接口：

interface TableRow {
  name: string;
  alt: string;
  parentObj: {
    innerObj: {
      Key: string[];
    };
  };
  description: string;
}

之后在列定义的cell中指定类型：

cell: (row: TableRow) => row.parentObj.innerObj.Key[0] || ''

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