SPFx React Webpart删除数组项报TypeError: n is not a function错误如何解决

根因 #

• 列表渲染未设置唯一key，仅使用数组索引作为标识：修改数组项时索引不变，组件复用逻辑正常因此无报错；删除数组项后数组索引整体前移，React会错误复用已经被删除的子组件实例，旧实例绑定的回调引用失效，所以触发次数和原数组长度一致的TypeError: n is not a function报错。
• 子组件删除逻辑大概率存在闭包陷阱，或者未处理卸载后的异步回调，组件卸载后仍尝试执行更新操作。

修复步骤 #

1. 替换列表渲染的索引key为业务唯一标识
   父组件渲染代码调整，优先使用文件ID、唯一文件名等数组项自带的唯一字段作为key，禁止用索引作为key：

{upfiles.map((file, i) => {
  // 此处file.id替换为你的upfiles数组项中实际存在的唯一属性
  return (<FileActionComponent 
    key={file.id} 
    i={i} 
    setcurrentMessage={setcurrentMessage}
    setUpfiles={setUpfiles} // 把修改upfiles的state方法传递给子组件
  />);
})}

2. 子组件删除逻辑使用函数式更新state，避免闭包导致引用过时state
   子组件内删除按钮的点击回调写法：

const handleDelete = () => {
  // 函数式更新直接拿最新的state快照，不依赖外部props的upfiles
  props.setUpfiles(prevFiles => prevFiles.filter((_, index) => index !== props.i));
}

3. 补充子组件卸载清理逻辑，避免异步操作在组件卸载后执行

import { useEffect } from 'react';

// 子组件内添加副作用清理
useEffect(() => {
  return () => {
    // 清理未完成的异步请求、定时器、自定义事件监听等
  };
}, []);

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