如何在React-Redux Toolkit中给对象内的数组添加元素？

错误原因分析 #

• Reducer逻辑错误：你的CHANGE_USER reducer里使用了state.user.push(action.payload)，但state.user是对象而非数组，push是数组专属方法，这会导致无法正确合并更新数据。
• 展开非可迭代值：当user?.blockedUsers不存在时（即值为undefined），尝试用[...user?.blockedUsers, selectedUser]展开会报错，因为undefined不是可迭代对象。
• 未定义变量引用：dispatch(CHANGE_USER(blockedUsers?.selectedUser))中的blockedUsers变量未定义，因此抛出引用错误。

修复方案 #

步骤1：修正Reducer逻辑 #

修改slice中的CHANGE_USER reducer，正确合并更新user对象，保留原有数据的同时更新指定字段：

reducers: {
  CHANGE_USER: (state, action) => {
    // 合并原有user属性与新的payload，保留未修改的字段
    state.user = { ...state.user, ...action.payload };
  },
}

步骤2：组件中正确构造更新数据 #

在dispatch时，给blockedUsers设置默认空数组，避免undefined导致的展开错误：

// 处理blockedUsers的默认值：不存在则用空数组
const updatedBlockedUsers = [...(user?.blockedUsers || []), selectedUser];
dispatch(CHANGE_USER({ blockedUsers: updatedBlockedUsers }));

完整示例 #

Slice代码：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: {
    // 初始状态可能无blockedUsers字段
    name: '',
    email: ''
  }
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    CHANGE_USER: (state, action) => {
      state.user = { ...state.user, ...action.payload };
    },
  },
});

export const { CHANGE_USER } = userSlice.actions;
export default userSlice.reducer;

组件调用代码：

import { useSelector, useDispatch } from 'react-redux';
import { CHANGE_USER } from './userSlice';

// 假设这是你的组件
const UserComponent = () => {
  const user = useSelector(state => state.user.user);
  const dispatch = useDispatch();

  const handleBlockUser = (selectedUser) => {
    const updatedBlockedUsers = [...(user?.blockedUsers || []), selectedUser];
    dispatch(CHANGE_USER({ blockedUsers: updatedBlockedUsers }));
  };

  // 组件其他逻辑...
};

额外说明 #

• user?.blockedUsers || []确保当blockedUsers不存在时，用空数组替代，避免展开操作报错。
• Redux Toolkit内置的Immer库允许直接修改state（如state.user = {...}），它会自动转换为不可变更新，无需手动编写复杂的嵌套展开逻辑。

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