React中如何删除数组内指定UUID键名的对象？

你的state结构是数组，每个元素是仅包含一个UUID键的对象，之前两种方法失效的原因：

• 第一种filter逻辑错误：数据里不存在product字段，且判断条件完全偏离目标，没能正确识别要删除的数组元素
• 第二种操作对象错误：data是数组而非对象，不能用UUID作为索引直接delete，且React禁止直接修改state，必须通过setData更新

正确实现方式 #

方法一：通过键存在性判断过滤

利用in操作符检查数组元素是否包含目标UUID键，过滤掉匹配项：

const handleClick = (identifier: string) => {
  setData(prevData => 
    prevData.filter(el => !(identifier in el))
  );
};

说明：使用函数式更新（prevData）可以避免闭包导致的旧state问题，确保每次更新都基于最新的state值。

方法二：通过提取唯一键判断

因为每个数组元素只有一个键，直接提取元素的唯一键与目标UUID对比：

const handleClick = (identifier: string) => {
  setData(prevData => 
    prevData.filter(el => Object.keys(el)[0] !== identifier)
  );
};

关键注意事项 #

• 禁止直接修改React state（比如直接delete），必须通过setData触发状态更新
• 优先使用函数式更新处理依赖state的操作，避免异步更新带来的异常

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