'Date | 类型的参数null' 不可分配给“SetStateAction<Date>”类型的参数答案

【问题标题】：Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction<Date>''Date | 类型的参数null' 不可分配给“SetStateAction<Date>”类型的参数
【发布时间】：2020-04-17 05:38:23
【问题描述】：

我正在关注Ionic tutorial for react。我创建了教程页面，并尝试向其中添加一个 datepicker 元素。这是我现在的页面：

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React, { useState } from 'react';
import DatePicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";

const Home: React.FC = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        The world is your oyster 14.
        <p>
          If you get lost, the{' '}
          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/">
            docs
          </a>{' '}
          will be your guide.
        </p>
        <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
      </IonContent>
    </IonPage>
  );
};

export default Home;

我使用的日期选择器来自here，我在我的页面中使用了第一个示例：

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
  );
};

但是，我收到以下错误：

[react-scripts] Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction<Date>'.
[react-scripts]   Type 'null' is not assignable to type 'SetStateAction<Date>'.  TS2345
[react-scripts]     22 |           will be your guide.
[react-scripts]     23 |         </p>
[react-scripts]   > 24 |         <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
[react-scripts]        |                                                                         ^
[react-scripts]     25 |       </IonContent>
[react-scripts]     26 |     </IonPage>
[react-scripts]     27 |   );

有什么问题？

【问题讨论】：

标签： reactjs typescript ionic-framework react-datepicker

【解决方案1】：

来自react-datepicker 的onChange 回调看起来像this：

onChange(date: Date | null, event: React.SyntheticEvent<any> | undefined): void;

所以date 可能是null。您有两种选择：

1.) 在useState Hook 中接受可为空的日期状态：

const [startDate, setStartDate] = useState<Date | null>(new Date());

2.) 仅在date 不为空时调用setStartDate：

<DatePicker selected={startDate} onChange={date => date && setStartDate(date)} />

【讨论】：

我现在在 2021 年得到一个奇怪的，输入“日期 | [日期 |空，日期 |空] | null' 不可分配给类型 'Date |空 |不明确的'。对于“选定”道具甚至..嗯？似乎不对，为什么不对？ :D

【解决方案2】：

2021 年同一期的更新

<DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)} />

做这个工作

【讨论】：

不，仍然得到：Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction<Date>'. Type 'null' is not assignable to type 'SetStateAction<Date>
是的，因为您已将状态设置为 const [startDate, setStartDate] = useStateuseState(null) 在您计划具有“null”值的情况下

【解决方案3】：

我知道我迟到了，我刚刚让 DatePicker 工作。以下是工作代码：

const [startDate, setStartDate] = useState<Date>(new Date());
<DatePicker
   selected={startDate}
   onChange={(date: Date) => setStartDate(date!)}
/>

【讨论】：

【解决方案4】：

这对我有用：

() => {
  const [startDate, setStartDate] = useState<Date|null>(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)} />
  );
};

【讨论】：