Реагировать на указатель даты и машинопись

Question

В настоящее время пытаюсь использовать React и Typescript с response-datepicker.

У меня есть простая настройка, которую я хочу протестировать, но я получаю следующую ошибку:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Ниже это файл, который использует пакет DatePicker

import * as React from 'react';
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

interface DateConstructor  {
    startDate: Date;
} 

export class DateSelector extends React.Component<{}, DateConstructor > {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date()
        };
    }

    private handleChange(date) {
        this.setState({
            startDate: date
        });
    }

    public render() {
        const { startDate } = this.state;
        return (
            <DatePicker 
                dateFormat="dd-mm-yyyy"
                selected={startDate} 
                onChange={this.handleChange}
            />
        )
    }
}

Мне кажется очень странным, что пакет DatePicker нуждается в строке или функции?

Как решить эту проблему?

Полная ошибка ниже

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
invariant
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118:15
ReactCompositeComponentWrapper.instantiateReactComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273:23
ReactCompositeComponentWrapper.performInitialMount
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799:22
ReactCompositeComponentWrapper.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactCompositeComponentWrapper.performInitialMount
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803:34
ReactCompositeComponentWrapper.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactCompositeComponentWrapper.performInitialMount
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803:34
ReactCompositeComponentWrapper.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21

Ниже приведен файл, в котором я пытаюсь отобразить компонент DateSelector

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

import { DataOutputSwitch } from './ComponentLibrary/DataOutputSwitch';
import { DatatypeSelector } from './ComponentLibrary/DatatypeSelector';
import { DateSelector } from './ComponentLibrary/DateSelector';


export class ComponentLibrary extends React.Component<RouteComponentProps<{}>, {}> {

    public render() {
        return (
            <div>
                <h1>Pair4Insights Component Library</h1>
                <p>This component demonstrates all separate components.</p>
                <div style={{display: 'flex', flexDirection: 'column'}}>
                    <h3>Data Output Switch</h3>
                    <DataOutputSwitch />
                    <h3>Datattype Selector</h3>
                    <DatatypeSelector datatype="revenue" />
                    <h3>Date Selector</h3>
                    <DateSelector />
                </div>
            </div>
        );
    }
}

Answer 1

Я подключил этот компонент к работающему приложению Typescript React с небольшими изменениями, и он работает без проблем. Поэтому я подозреваю, что эта проблема вызвана каким-то другим фактором, помимо этого компонента. Эта ошибка go исчезнет, ​​если вы закомментируете этот компонент и не импортируете его?

Для справки, вот код:

import * as React from 'react';
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

interface DateConstructor  {
    startDate: Date;
} 

export class DateSelector extends React.Component<{}, DateConstructor> {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date()
        };
        this.handleChange = this.handleChange.bind(this);
    }

    private handleChange(date) {
        console.log('date is here!', date);
        this.setState({
            startDate: date
        });
    }

    public render() {
        const { startDate } = this.state;
        return (
            <DatePicker
                dateFormat="dd/MM/yyyy"
                selected={startDate} 
                onChange={this.handleChange}
            />
        )
    }
}

и импорт в App.tsx:

import { DateSelector } from './DateSelector';

Как видите, я внес несколько изменений в привязку функции handleChange и обновление форматирования даты (в коде вопроса это неверный ввод).

Надеюсь, этот ответ подтолкнул вас в правильном направлении.

Answer 2

selected prop ожидает получить строку в качестве выбранного по умолчанию значения. Вы передаете объект даты. Вы можете использовать useState ловушку для поддержания состояния как:

import {useState} from "react";

const YourComponent = () => {
   const [date, setDate] = useState("");

   return (
      <DatePicker 
          dateFormat="DD-MM-YYYY"
          selected={date} 
          onChange={date => setDate(date)}
       />
   );
}