在状态中检测到不可序列化的值答案

【问题标题】：Non-serializable value was detected in the state在状态中检测到不可序列化的值
【发布时间】：2021-08-03 04:32:12
【问题描述】：

我在登录并转到仪表板时一直看到此错误。

显示此错误在状态中检测到一个不可序列化的值，在路径中：bugs.0。值：错误{名称：“加载时崩溃”，详细信息：“3 秒后崩溃”，步骤：“打开应用程序会崩溃”，优先级：1，分配：未定义，...} 查看处理此操作类型的 reducer：bug/getBugs。

这是减速器：

/* eslint-disable no-unused-vars */
import {createSlice} from '@reduxjs/toolkit'
import {retrieveBugs} from '../bugController'

const slice = createSlice({
    name:"bug",
    initialState:[{}],
    reducers:{
        getBugs:(state) => retrieveBugs(),
        
        createBugs: (state,actions) =>{
            const {name,details,steps,priority,assaigned,creator,version,time} = actions.payload;
            state.LoggedIn =true;
            state.admin = true;
        },
        updateBug:(state,actions) => {
            const {name,details,steps,priority,assaigned,creator,version,time} = actions.payload;
            state.LoggedIn =true;
            state.admin= true;
        
        },
        markComplete:(state,actions) => {
            const {name,details,steps,priority,assaigned,creator,version,time} = actions.payload;
            state.LoggedIn =true;
            state.admin= true;
        }
    }
})

export default slice.reducer;

export const {getBugs, createBugs, updateBug, markComplete} = slice.actions;

这里是 bugController

import bugModel from '../Models/bugModel'

export function retrieveBugs(){
    let data = [];

    data.push(new bugModel({
        name:"Crash on load",
        details: "Crash after 3 seconds",
        steps: "Open application and it will Crash",
        assaigned: "Al Amzad",
        creator: "John Doe",
        priority: 1,
        version: "V1.0",
        time: "1:45",
    }))
    
      data.push(new bugModel({
        name:"Wont load",
        details: "Application doesn't load",
        steps: "Open the Application it won't Load ",
        assaigned: "Al Amzad",
        creator: "John Doe",
        priority: 3,
        version: "V3.0",
        time: "23:45",
    }))

    // eslint-disable-next-line no-unused-vars
    let sorted = data.sort((a,b) => {return a.priority - b.priority})

    return sorted;
}

【问题讨论】：

标签： reactjs redux react-redux redux-toolkit

【解决方案1】：

Redux requires that you only put plain non-serializable JS objects, arrays, and primitives into state.

new bugModel 将是一个类实例，因此不是一个普通的可序列化 JS 对象。因此，RTK 专门发现了这个错误并警告您不要这样做。

解决方法是切换到使用纯数据而不是类。

【讨论】：