Question

I m building a budget App using React 18 and Redux I don t know what is the problem here

import moment from "moment";

const filtersDefaultState = {
  text: "",
  sortBy: "date",
  startDate: moment().startOf("month"),
  endDate: moment().endOf("month"),
};

我在增加时间之后再谈这个问题。

redux-toolkit.esm.js?8bb3:444 A non-serializable value was detected in the state, in the path

资料来源:Github:https://github.com/KhaledGharib/visionApp。

利用日期

Answer 1

这里的问题是<代码>moment.js 日标不是JSON序列izable。

您可以“航空”,例如,数据说明:

import moment from "moment";

const filtersDefaultState = {
  text: "",
  sortBy: "date",
  startDate: moment().startOf("month").toISOString(true), // "2023-03-01T00:00:00.000Z"
  endDate: moment().endOf("month").toISOString(true),     // "2023-03-31T23:59:59.999Z"
};

如果你really希望通过serializabilityMiddleware/a>,你可以选择将这一部分国家排除在外:

import { configureStore, createSlice } from "@reduxjs/toolkit";
import expensesReducer from "../reducers/expenses";
import filtersReducer from "../reducers/filters";

const defaultMiddlewareConfig = {
  serializableCheck: {
    ignoredPaths: ["filters.startDate", "filters.endDate"],
  }
};

export default () => {
  const store = configureStore({
    reducer: {
      expenses: expensesReducer,
      filters: filtersReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware(defaultMiddlewareConfig),
  });
  return store;
};

Answer 2

您可以通过添加<条码>至ISOString(<>条码>>的功能,或者如果你使用红色高射线(<>条码/代码>至<条码>,简单地设定<条码>>不可扩展的Check。

 const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({serializableCheck:false}).concat(yourCustomMiddleWare),
  });

友情链接