为什么我的 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/initialize

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