材料日期时间选取器更改打字稿不匹配错误

Question

我有一个以下 React + Material DatePicker 代码，从各自的文档中逐字复制。

let App: React.FC = () => {
const [dateStart, handleDateStart] = useState(new Date());
const [dateEnd, handleDateEnd] = useState(new Date());
return (
// Pickers from Material https://material-ui-pickers.dev/getting-started/usage
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker value={dateStart} onChange={handleDateStart}/>
<DateTimePicker value={dateEnd} onChange={handleDateEnd}/>)
</MuiPickersUtilsProvider>);
};

但是，我用TypeScript编写，它在onChange位上抱怨：

Error:(28, 47) TS2322: Type 'Dispatch<SetStateAction<Date>>' is not assignable to type '(date: MaterialUiPickersDate) => void'.
Types of parameters 'value' and 'date' are incompatible.
Type 'MaterialUiPickersDate' is not assignable to type 'SetStateAction<Date>'.
Type 'null' is not assignable to type 'SetStateAction<Date>'.

TsConfig：

{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

我是 React 和 Material 的新手，如何避免此错误？

Answer 1

问题是日期选择器也可以返回null(如果值为空(

工作示例：

const [date, setDate] = React.useState<Date | null>(new Date());
return (
<DatePicker
value={date} 
onChange={newDate => setDate(newDate)} 
/>
)

Answer 2

Import MaterialUiPickersDate

import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';

工作示例

import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import React, { useState } from 'react';
import DateFnsUtils from '@date-io/date-fns';
import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';
interface IDateTimePickerComponent {
label: string;
}
function DateTimePickerComponent({ label }: IDateTimePickerComponent) {
const [selectedDate, handleDateChange] =
useState<MaterialUiPickersDate | null>(new Date());
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
disablePast
label={label}
value={selectedDate}
onChange={handleDateChange}
/>
</MuiPickersUtilsProvider>
);
}
export default DateTimePickerComponent;

Answer 3

对我来说，将我的类型设置为以下内容很有帮助：

startsAt: Date | Moment | null;

Answer 4

尝试useState<Date>(new Date())以防止错误检查打字稿的类型