React-Redux中非序列化值错误及移除用户功能异常的解决方案

问题1："A non-serializable value was detected in an action" 错误 #

原因：你的removeuser函数接收了按钮点击的事件对象（你错误命名为state），并把这个对象传给了removeUser action。Redux Toolkit默认会校验action payload的可序列化性，而DOM事件对象无法被序列化，因此触发了该错误。

修复：removeUser action不需要传参，直接调用dispatch(removeUser())即可，不要传递事件对象。

问题2：移除用户后组件无法正常渲染 #

原因：你在removeUser reducer里把state.users设置成了空字符串""，但组件一直在访问users.id、users.name这类对象属性——空字符串不是对象，访问这些属性会导致渲染报错。而初始状态中users是一个空对象，所以移除后应该重置为与初始状态一致的空对象结构，而非空字符串。

修复：在removeUser reducer中，将state.users重置为初始的空对象结构。

修改后的 userSlice.js #

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

// 抽离初始用户状态，方便复用
const initialUserState = {
  id: "",
  name: "",
  email: "",
};

const userSlice = createSlice({
  name: "users",
  initialState: {
    users: initialUserState,
  },
  reducers: {
    addUser: (state, action) => {
      state.users = action.payload;
    },
    removeUser: (state) => {
      // 重置为初始空对象结构
      state.users = initialUserState;
    },
  },
});

export const { addUser, removeUser } = userSlice.actions;
export default userSlice.reducer;

修改后的 User 组件 #

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { removeUser } from "../Slices/userSlice";

const User = () => {
  const users = useSelector((state) => state.users.users);
  const dispatch = useDispatch();

  // 不需要接收参数，直接触发无参的removeUser action
  const removeuser = () => {
    dispatch(removeUser());
  };

  return (
    <div>
      <h1>{users.id}</h1>
      <h2>{users.name}</h2>
      <h3>{users.email}</h3>

      <button onClick={removeuser}>Remove User</button>
    </div>
  );
};

export default User;

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