为什么我的 React 日期组件不起作用?

Question

似乎无法弄清楚如何在每次都破坏不同内容的情况下修复 React 日期

我有这个：

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 您必须导入反应日期/初始化

import 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() {
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);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<DateRangePicker
endDate={endDate}
endDateId="endDate"
focusedInput={focusedInput.focusedInput}
isOutsideRange={() => null}
onDatesChange={onDatesChange}
onFocusChange={focusedInput => setFocusedInput({ focusedInput })}
startDate={startDate}
startDateId="startDate"
/>
;
</div>
);
}

另请参阅此沙盒链接。 https://codesandbox.io/s/hidden-currying-9jydi?file=/src/App.js