为什么在createSlice中使用push会给state新增数字3而非追加数组？

问题原因 #

Array.push() 方法的返回值是追加元素后的数组长度，不是修改后的数组本身。你当前的写法是把push的返回值直接赋值给了state.users，才会导致后续调用find方法时报错——数字类型本身没有find方法。

另外Redux Toolkit的createSlice内部集成了Immer，允许你直接修改状态对象，不需要手动赋值来更新状态，你可以选择以下任意一种正确写法：

写法1：直接操作数组，无需赋值

builder.addCase(fetchUsers.fulfilled, (state, action) => {
  state.users.push(...action.payload);
});

写法2：用concat或者扩展运算符生成新数组赋值

builder.addCase(fetchUsers.fulfilled, (state, action) => {
  // 你注释掉的写法本身就是正确的
  state.users = state.users.concat(action.payload);
  // 等价的扩展运算符写法
  // state.users = [...state.users, ...action.payload]
});

错误复现逻辑 #

你写的state.users = state.users.push(...action.payload)执行顺序如下：

1. 先给原state.users数组追加action.payload里的3个元素，此时state.users是包含3个元素的数组
2. 再把push方法返回的数组长度3赋值给state.users，覆盖了之前的数组
3. 最终state.users变成数字3，调用find方法自然会报错

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