MaterialTable组件中IPerson类型不存在tableData属性及获取行更新/删除索引问题解决方案咨询

嘿，我来帮你搞定这个问题！你遇到的Property 'tableData' does not exist on type 'IPerson'错误，是因为MaterialTable内部会自动给每行数据注入一个tableData属性，但你的IPerson接口没有定义它，所以TypeScript会抛出类型检查错误。下面给你两种靠谱的解决方法：

方法一：扩展IPerson接口，添加可选的tableData属性 #

这种方法最直接，一劳永逸地解决类型问题。因为tableData是MaterialTable动态添加的，原始数据里并不存在，所以我们把它设为可选属性：

interface IPerson {
  name: string;
  age: number;
  // 定义MaterialTable注入的tableData属性，设为可选
  tableData?: {
    id: number; // 这里的id就是行的索引值
  };
}

之后你就能在onRowUpdate或onRowDelete里安全地访问索引了：

onRowUpdate: (newData, oldData) => {
  if (!oldData?.tableData) return Promise.resolve();
  
  const rowIndex = oldData.tableData.id;
  // 用rowIndex来更新你的数据源数组
  // 比如：const updatedData = [...data]; updatedData[rowIndex] = newData;
  
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 600);
  });
},

方法二：使用类型断言（无需修改原接口） #

如果你不想修改原有的IPerson接口，可以在需要访问tableData的地方用类型断言，临时扩展类型：

onRowDelete: (oldData) => {
  // 把oldData断言为包含tableData的类型
  const rowWithTableData = oldData as IPerson & { tableData: { id: number } };
  const rowIndex = rowWithTableData.tableData.id;
  
  // 用rowIndex删除数据源中对应的项
  // 比如：const updatedData = data.filter((_, idx) => idx !== rowIndex);
  
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 600);
  });
},

额外小技巧：不依赖tableData获取索引 #

如果你的数据有唯一标识（比如name是唯一的），也可以通过findIndex来定位行，不需要依赖tableData：

onRowUpdate: (newData, oldData) => {
  if (!oldData) return Promise.resolve();
  
  const rowIndex = data.findIndex(person => person.name === oldData.name);
  // 后续更新逻辑...
  
  return Promise.resolve();
},

不过这种方法只适用于数据有唯一字段的场景，如果有重复数据，还是用tableData.id更可靠。

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