React setState与数组filter失效问题求助

从你的代码和描述来看，核心问题大概率是类型不匹配导致过滤条件失效：

• 你打印的itemId是1685584897944，但如果active.id返回的是字符串类型（很多拖拽库会自动把ID转为字符串），而数组里的instanceId是数字类型，那么item.instanceId !== itemId的比较会因类型不同始终返回true，导致过滤后的数组和原数组完全一致。

修复方案 #

修改removeItemFromCanvas函数，统一比较的类型即可：

方案1：将itemId转为数字 #

const removeItemFromCanvas = (itemId) => {
    // 先确认itemId的类型，方便排查问题
    console.log(typeof itemId, itemId);
    // 转换为数字类型，和instanceId保持一致
    const targetId = Number(itemId);
    setCanvasItems((prevItems) =>
      prevItems.filter((item) => item.instanceId !== targetId)
    );
};

方案2：将instanceId转为字符串 #

const removeItemFromCanvas = (itemId) => {
    setCanvasItems((prevItems) =>
      prevItems.filter((item) => String(item.instanceId) !== itemId)
    );
};

额外验证步骤 #

1. 在removeItemFromCanvas中添加类型打印，确认两者类型差异：

console.log(typeof itemId, typeof prevItems[0].instanceId);

2. 若类型一致但状态仍未更新，可通过useEffect监听状态变化，确认更新是否生效：

useEffect(() => {
  console.log("当前canvasItems状态:", canvasItems);
}, [canvasItems]);

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