错误:在状态中检测到不可序列化的值,路径为:筛选器.开始日期(redux-toolkit.esm.js)

6l7fqoea  于 2023-03-18  发布在  其他
关注(0)|答案(1)|浏览(161)

当我添加一个时刻时,我在这里得到一个错误

import moment from "moment";

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

因此,我通过将defaultMiddlewareConfig添加到configurestore.js文件来解决此问题

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;
};

之后,代码将正常工作,直到使用DateRangePicker返回错误react_devtools_backend.js:2655在操作中检测到不可序列化的值,路径为:startDate。值在操作中检测到不可序列化的值,路径为:endDate .数值
如果我在返回错误时添加了toISOString(true)

import moment from "moment";

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

未捕获的类型错误:startDate.isSameOrBefore不是函数并且未捕获类型错误:endDate.isSameOrAfter不是函数

import moment from "moment";

export default (expenses, { text, sortBy, startDate, endDate }) => {
  return expenses
    .filter((expense) => {
      const creadtedAtMoment = moment(expense.creadtedAt);

      const startDateMatch = startDate
        ? startDate.isSameOrBefore(creadtedAtMoment, "day")
        : true;

      const endDateMatch = endDate
        ? endDate.isSameOrAfter(creadtedAtMoment, "day")
        : true;
      const textMatch = expense.description
        .toLowerCase()
        .includes(text.toLowerCase());

      return startDateMatch && endDateMatch && textMatch;
    })
    .sort((a, b) => {
      if (sortBy === "date") {
        return a.createdAt < b.createdAt ? 1 : -1;
      } else if (sortBy === "amount") {
        return a.amount < b.amount ? 1 : -1;
      }
    });
};

在此文件中,我使用DateRangePicker

import React from "react";
import { DateRangePicker } from "react-dates";
import { connect } from "react-redux";
import {
  setEndDate,
  setStartDate,
  setTextFilter,
  sortByAmount,
  sortByDate,
} from "../actions/filters";

class ExpenseListfilters extends React.Component {
  state = {
    calenderFocuesd: null,
  };
  onDatesChange = ({ startDate, endDate }) => {
    this.props.dispatch(setStartDate(startDate));
    this.props.dispatch(setEndDate(endDate));
  };
  onFocusChange = (calenderFocuesd) => {
    this.setState(() => ({ calenderFocuesd }));
  };
  render() {
    return (
      <div>
        <input
          text="text"
          value={this.props.filters.text}
          onChange={(e) => {
            this.props.dispatch(setTextFilter(e.target.value));
          }}
        />
        <select
          value={this.props.filters.sortBy}
          onChange={(e) => {
            if (e.target.value === "date") {
              this.props.dispatch(sortByDate());
            } else if (e.target.value) {
              this.props.dispatch(sortByAmount());
            }
          }}
        >
          <option value="date">Date</option>
          <option value="amount">Amount</option>
        </select>
        <DateRangePicker
          startDate={this.props.filters.startDate}
          endDate={this.props.filters.endDate}
          onDatesChange={this.onDatesChange}
          focusedInput={this.state.calenderFocuesd}
          onFocusChange={this.onFocusChange}
          showClearDates={true}
          numberOfMonths={1}
          isOutsideRange={() => false}
          startDateId="MyDatePickerStart"
          endDateId="MyDatePickerEnd"
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    filters: state.filters,
  };
};

export default connect(mapStateToProps)(ExpenseListfilters);

正如我上面提到的,我尝试了这些solutions,但不能解决其他问题

zmeyuzjn

zmeyuzjn1#

如果要将momentjs datetime对象字符串化以存储在存储区中,则应将它们转换回UI所需的momentjs datetime对象。
示例:

import moment from "moment";

...

const mapStateToProps = (state) => ({
  filters: {
    ...state.filters,
    startDate: moment(state.filters.startDate),
    endDate: moment(state.filters.endDate),
  },
});

当调度到存储区时,更改处理程序可能还需要再次字符串化datetime对象。

onDatesChange = ({ startDate, endDate }) => {
  this.props.dispatch(setStartDate(startDate.toISOString(true)));
  this.props.dispatch(setEndDate(endDate.toISOString(true)));
};

如果您愿意,您可以在操作创建器中执行此转换:
一个二个一个一个

相关问题