当我添加一个时刻时,我在这里得到一个错误
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,但不能解决其他问题
1条答案
按热度按时间zmeyuzjn1#
如果要将
momentjs
datetime对象字符串化以存储在存储区中,则应将它们转换回UI所需的momentjs
datetime对象。示例:
当调度到存储区时,更改处理程序可能还需要再次字符串化datetime对象。
如果您愿意,您可以在操作创建器中执行此转换:
一个二个一个一个