[英]DataCloneError: Failed to execute 'pushState' on 'History'
I am new to Reactjs. I wanted to input date-range from user and pass it to second page(search) but I got the error(DataCloneError: Failed to execute 'pushState' on 'History'.) when I pass states endDate and startDate.It works fine when I pass any sample string(example - startdate:"sample").我是 Reactjs 的新手。我想从用户输入日期范围并将其传递到第二页(搜索)但是我收到错误(DataCloneError:无法在“历史”上执行“pushState”。)当我传递状态 endDate 和startDate。当我传递任何示例字符串(示例 - startdate:“sample”)时,它工作正常。 Please help me to get rid of this error.
请帮我摆脱这个错误。
import React from "react";
import { Link } from "react-router-dom";
import "react-bootstrap";
import { DateRangePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
function Filters() {
const [dateRange, setdateRange] = React.useState({
startDate: null,
endDate: null,
});
const [focus, setFocus] = React.useState(null);
const { startDate, endDate } = dateRange;
return (<>
<DateRangePicker
startDatePlaceholderText="Check-in"
endDatePlaceholderText="Check-out"
startDate={startDate}
endDate={endDate}
numberOfMonths={1}
onDatesChange={({ startDate, endDate }) =>
setdateRange({ startDate, endDate })
}
showClearDates={true}
focusedInput={focus}
onFocusChange={(focus) => setFocus(focus)}
startDateId="startDateMookh"
endDateId="endDateMookh"
minimumNights={1}
/>
<Link to={{ pathname: "/search", state: {
startdate: "startdate",
enddate: endDate,
},}}>
<div className="search">
<p>Search</p>
</div>
</Link>
</>
);
}
export default Filters;
This is second page (search)这是第二页(搜索)
import React from "react";
import Hotellist from "./components/hotellist";
import Filters from "./components/filters";
import { useLocation } from "react-router";
function List() {
const location = useLocation();
const {startdate, enddate} = location.state;
console.log(startdate, enddate);
return (
<>
</>
);
}
What I could find is that startDate and endDate are not just dates.我能找到的是 startDate 和 endDate 不仅仅是日期。 They hold more data than that.
他们拥有比这更多的数据。 To get only date or to send data to other page use moment
仅获取日期或将数据发送到其他页面使用时刻
import moment from "moment"
Send it like this
startdate: moment(startDate).format("yyyy-MM-dd")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.