为什么我的 React Dates 组件不起作用？

Question

似乎无法弄清楚如何修复 React Dates 而不破坏每次不同的东西

我有这个：

const [startDate, setStartDate] = useState(moment().subtract(2, 'year'))

const [endDate, setEndDate] = useState(null)

const [focusedInput, setFocusedInput] = useState('startDate')

const onDatesChange = ({ startDate, endDate }) => {

    setStartDate(startDate)

    setEndDate(endDate)

}

<DateRangePicker

    endDate={endDate}

    endDateId="endDate"

    focusedInput={focusedInput.focusedInput}

    isOutsideRange={() => null}

    onDatesChange={onDatesChange}

    onFocusChange={(focusedInput) => setFocusedInput({ focusedInput })}

    startDate={startDate}

    startDateId="startDate"

/>

所以我得到的第一个错误是这样的：Uncaught Error: Objects are not valid as a React child (found: object with keys {_isAMomentObject, _isUTC, _pf, _locale, _d, _isValid})

然后我尝试了各种类似这样的东西：

const onDatesChange = ({ startDate, endDate }) => {

    setStartDate(moment(startDate).format('DD-MM-YYYY')

    setEndDate(moment(endDate).format('DD-MM-YYYY)

}

并将初始状态设置为 null。但后来这给了我一个错误invalid date

我想做的就是在一个范围内设置2个不同的日期，这似乎非常复杂

Answer 1

我在github页面上找到了评论 github 你必须导入 react-date/initializeimport React, { useState } from "react";import "./styles.css";import moment from "moment";import "react-dates/initialize";import { DateRangePicker } from "react-dates";import "react-dates/lib/css/_datepicker.css";export default function App() {&nbsp; const [startDate, setStartDate] = useState(moment().subtract(2, "year"));&nbsp; const [endDate, setEndDate] = useState(null);&nbsp; const [focusedInput, setFocusedInput] = useState("startDate");&nbsp; const onDatesChange = ({ startDate, endDate }) => {&nbsp; &nbsp; setStartDate(startDate);&nbsp; &nbsp; setEndDate(endDate);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; <h2>Start editing to see some magic happen!</h2>&nbsp; &nbsp; &nbsp; <DateRangePicker&nbsp; &nbsp; &nbsp; &nbsp; endDate={endDate}&nbsp; &nbsp; &nbsp; &nbsp; endDateId="endDate"&nbsp; &nbsp; &nbsp; &nbsp; focusedInput={focusedInput.focusedInput}&nbsp; &nbsp; &nbsp; &nbsp; isOutsideRange={() => null}&nbsp; &nbsp; &nbsp; &nbsp; onDatesChange={onDatesChange}&nbsp; &nbsp; &nbsp; &nbsp; onFocusChange={focusedInput => setFocusedInput({ focusedInput })}&nbsp; &nbsp; &nbsp; &nbsp; startDate={startDate}&nbsp; &nbsp; &nbsp; &nbsp; startDateId="startDate"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; ;&nbsp; &nbsp; </div>&nbsp; );}另请参阅此沙盒链接。https://codesandbox.io/s/hidden-currying-9jydi?file=/src/App.js