Redux Toolkit存储action.payload遇React报错：对象不能作为React子元素

你的报错核心原因是Redux状态中的email字段被赋值为了一个对象，后续在React组件中渲染这个对象时触发了"Objects are not valid as a React child"错误。结合你的代码，有两处可以修正的地方：

1. 修正Reducer中的赋值逻辑 #

当前你的login reducer直接把action.payload（一个包含email属性的对象）赋值给了state.value.email，导致email字段变成了对象而非字符串。修改成提取payload中的email属性即可：

const userSlice = createSlice({
  name: "user",
  initialState: { value: { name: "", age: 0, email: "" } },
  reducers: {
    login: (state, action) => {
      state.value.name = "Alex"
      state.value.age += 1
      // 提取payload里的email字符串赋值给state的email字段
      state.value.email = action.payload.email
    }, 
  }
})

2. 或者修正dispatch时传入的payload格式 #

如果你想保持Reducer的逻辑不变，可以直接把邮箱字符串作为payload传入，而非对象：

function Login() {
  const dispatch = useDispatch()

  return (
    <div>
      <button
        onClick={() => {
          // 直接传入邮箱字符串作为payload
          dispatch(login('example@gmail.com'))
        }}
      >
        Login
      </button>
    </div>
  )
}

额外注意：确保渲染组件的正确性 #

同时要检查你展示用户状态的组件，避免直接渲染整个user.value对象或者email对象，必须渲染具体的属性值：

// 正确示例
function UserProfile() {
  const user = useSelector(state => state.user.value)
  return (
    <div>
      <p>姓名：{user.name}</p>
      <p>年龄：{user.age}</p>
      <p>邮箱：{user.email}</p>
    </div>
  )
}

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