简体   繁体   English

DataCloneError:无法在“历史”上执行“pushState”

[英]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.

相关问题 ReactJS DataCloneError:无法在“历史”上执行“pushState”:无法克隆 MouseEvent object - ReactJS DataCloneError: Failed to execute 'pushState' on 'History': MouseEvent object could not be cloned 将 React 应用程序注入 Chrome 扩展程序时,无法在“历史记录”上执行“pushState” - Failed to execute 'pushState' on 'History' while injecting React app into Chrome extension 如何修复未捕获的 DOMException:无法在“历史记录”上执行“pushState” - How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History' 无法在“历史记录”上执行“ pushState”:函数addComment()……无法克隆 - Failed to execute 'pushState' on 'History': function addComment() … could not be cloned 反应:未捕获的 DOMException:无法在“历史”上执行“pushState”:历史 state object 和 URL - react:Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 使用 react-router-dom 中的“Link”时,为什么“无法在“历史”上执行“pushState”? - Why `Failed to execute 'pushState' on 'History'` when using `Link` from react-router-dom? 未捕获的 DOMException:无法在“历史”上执行“pushState”:函数 () { [本机代码] } 无法克隆 - Uncaught DOMException: Failed to execute 'pushState' on 'History': function () { [native code] } could not be cloned DOMException:无法在“历史”上执行“replaceState”:历史 state object 与 URL - DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 未捕获的 SecurityError:无法在“历史记录”上执行“replaceState”:历史记录 state object 和 URL - Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL window.history.pushState 不能开玩笑 - window.history.pushState not Working in jest
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM