问题
你好,我是redux的新用户。我想将日期范围(startdate和enddate)存储在store上。如下图所示,控制台上会返回“start,end”值,但问题是,数据不会存储在操作中。它保持显示、空和未定义。
你能给我一个解决这些问题的建议吗?
附件
type.js
export const BookingActionType = {
BOOKING_CALENDER_DATE: 'BOOKING_CALENDER_DATE',
}
行动
export const getCalenderDate = ({ start, end }) => ({
type: BookingActionType.BOOKING_CALENDER_DATE,
payload: { start, end },
});
reducer.js
const INITIAL_STATE = {
collection: BOOKING_TYPE_DATA,
hidden: true,
guest: 0,
adult: 0,
infant: 0,
startDay: null,
endDay: null,
};
const bookingReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case BookingActionType.BOOKING_CALENDER_DATE:
return {
...state,
startDay: action.value !== undefined ? action.value : state.startDay,
endDay: action.value !== undefined ? action.value : state.endDay,
};
成分
function Calender({ props, getUserDate }) {
const [startDate, setStartDate] = useState(moment);
const [endDate, setEndDate] = useState(moment);
const [focusedInput, setFocusedInput] = useState(null);
const handleDatesChange = ({ startDate, endDate }) => {
setStartDate(startDate);
setEndDate(endDate);
let start = new Date(startDate).toLocaleDateString();
let end = new Date(endDate).toLocaleDateString();
console.log(start, end);
console.log(typeof start);
getUserDate(start, end);
};
return (
<div>
<DateRangePicker
startDate={startDate}
startDateId="start_date_id"
endDate={endDate}
endDateId="end_date_id"
onDatesChange={handleDatesChange}
customArrowIcon={true}
noBorder={true}
block={true}
focusedInput={focusedInput}
onFocusChange={focusedInput => setFocusedInput(focusedInput)}
/>
</div>
);
}
const mapDispatchToProps = dispatch => ({
getUserDate: (start, end) => dispatch(getCalenderDate(start, end)),
});
export default connect(null, mapDispatchToProps)(Calender);
1条答案
按热度按时间pxq42qpu1#
在reducer.js文件中,使用
action.value
.相反,它应该是
action.payload
. 此外,在动作函数中,期望变量不是对象,因此替换({start,end})
具有(start,end)
. 我也做了一些改进,希望能有所帮助复制粘贴此代码,它应该可以工作
行动
reducer.js