reactjs 类型为“Date”的参数|不能将“null”赋给类型为“SetStateAction”的参数< Date>

hfsqlsce 于 2023-01-12 发布在 React

关注(0)|答案(5)|浏览(186)

我正在跟踪Ionic tutorial for react。我创建了教程页面，并尝试向其中添加一个日期选择器元素。这是我现在的页面：

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;

我正在使用的日期选择器是从这里，我用我的页面中的第一个例子：

() => {
  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

来源：https://stackoverflow.com/questions/59497548/argument-of-type-date-null-is-not-assignable-to-parameter-of-type-setstatea

5条答案

按热度按时间

hts6caw31#

来自react-datepicker的onChange回调类似于：

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)} />

赞(0）回复(0）举报 2023-01-12

icomxhvb2#

2021年同一问题的更新

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

做这份工作

赞(0）回复(0）举报 2023-01-12

holgip5t3#

我知道我迟到了，我刚刚得到的日期选择器工作.以下是工作代码：

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

赞(0）回复(0）举报 2023-01-12

dgtucam14#

这对我很有效：

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

赞(0）回复(0）举报 2023-01-12

kninwzqo5#

对于得到错误的人：
键入日期|[日期|空，日期|无效]|null“不能赋给类型”Date|零|未定义的
这是因为您使用的是日期范围，因此onChange参数将获得数组类型[start，end]。

赞(0）回复(0）举报 2023-01-12