TypeScript中caseLocations调用findIndex报错：findIndex is not a function

核心问题 #

你遇到的报错本质是运行时类型不匹配：你在TypeScript里把caseLocations定义成了Array<CaseLocation>类型，但实际拿到的是一个普通JavaScript对象（结构是{0: {...}, 1: {...}, ...}），而非真正的Array实例。

findIndex、map这些方法都是Array.prototype上的专属方法，只有数组才能直接调用。普通对象的原型链上没有这些方法，所以调用时就会抛出xxx is not a function的错误。

为什么会出现这种情况？ #

通常是因为后端接口返回的数据格式不符合预期——后端可能把数组序列化成了带数字键的对象，或者你在接收数据时的处理逻辑不小心把数组转成了这种结构。而TypeScript的静态类型检查只会信任你定义的类型，不会自动校验运行时的实际数据，所以就出现了“编译时没问题，运行时报错”的情况。

解决方法 #

1. 把类数组对象转成真正的数组

最直接的方式是将这个带数字键的对象转换成标准数组，之后就能正常使用数组方法了。常用的转换方式有三种：

• 使用Array.from()：如果对象是类数组（有length属性且键为连续数字），可以直接转换：

  // 先转换为真正的数组
  const caseLocationsArray = Array.from(state.results.caseLocations);
  // 执行删除逻辑
  const targetIndex = caseLocationsArray.findIndex(i => i.objectid === action.objectId);
  if (targetIndex !== -1) {
    caseLocationsArray.splice(targetIndex, 1);
    // 把修改后的数组赋值回去
    state.results.caseLocations = caseLocationsArray;
  }
  

• 使用Object.values()：如果只需要对象里的属性值（你的场景正好匹配），可以用这个方法直接提取所有值组成数组：

  const caseLocationsArray = Object.values(state.results.caseLocations);
  const targetIndex = caseLocationsArray.findIndex(i => i.objectid === action.objectId);
  if (targetIndex !== -1) {
    caseLocationsArray.splice(targetIndex, 1);
    // 如果需要转回原来的对象结构（比如后端要求），可以用reduce
    state.results.caseLocations = caseLocationsArray.reduce((acc, item, idx) => {
      acc[idx] = item;
      return acc;
    }, {} as Record<number, CaseLocation>);
  }
  

• 使用展开运算符：和Object.values()效果类似，写法更简洁：

  const caseLocationsArray = [...Object.values(state.results.caseLocations)];
  // 后续逻辑和上面一致
  

2. 从源头解决：修正数据来源

如果是后端返回的问题，建议和后端开发同学沟通，让接口直接返回标准的JSON数组（比如[{...}, {...}, ...]），这样就能避免后续的转换操作，从根源上解决类型不匹配的问题。

3. 增加类型守卫（可选）

为了避免后续再出现类似的运行时错误，可以在处理数据前加一个类型校验，确保数据是数组：

// 先判断是否为数组，不是的话就转换
if (!Array.isArray(state.results.caseLocations)) {
  state.results.caseLocations = Object.values(state.results.caseLocations);
}
// 现在可以安全调用数组方法了
const targetIndex = state.results.caseLocations.findIndex(i => i.objectid === action.objectId);
if (targetIndex !== -1) {
  state.results.caseLocations.splice(targetIndex, 1);
}

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