React/Redux+TypeScript中reducer的filter方法失效问题排查

核心问题：类型不匹配导致全等比较失败 #

你在showCurImg reducer中使用了PayloadAction<Number>作为action的类型，但实际生成的id是number原始类型（Math.random()返回原始数值）。Number是JavaScript的包装对象类型，原始数值和包装对象用===比较时会返回false，所以filter无法匹配到任何元素，返回空数组。

当你改用!==时，所有不匹配的项都会被保留，而Redux Toolkit通过Immer库处理状态，state.gallery是Immer生成的代理对象，所以打印出来的数组会显示为"代理对象"，这是正常的状态管理机制，不影响数据的实际使用。

修复步骤 #

1. 修正Action的类型定义
   将showCurImg的PayloadAction泛型从Number改为number，匹配实际的id类型：

showCurImg: (state, action: PayloadAction<number>) => {
  // 后续逻辑
}

2. 优化匹配逻辑并更新状态
   你需要将匹配到的对象赋值给state.curImg（否则状态不会更新），同时用find代替filter更高效（因为你只需要匹配单个对象）：

showCurImg: (state, action: PayloadAction<number>) => {
  const matchedImg = state.gallery.find(item => item.id === action.payload);
  state.curImg = matchedImg || {};
  console.log(matchedImg);
}

3. 可选：优化id生成方式
   Math.random()生成的id存在重复概率，建议用更可靠的方式生成唯一id，比如：

const imgId = Date.now() + Math.random(); // 结合时间戳降低重复概率

额外说明 #

Immer代理对象在console中显示的形式可能和普通对象不同，但你可以正常访问其属性，无需额外处理。如果想查看原始数据，可以使用JSON.stringify()转换后打印。

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