Material DateTimePicker onChange Typescript 不匹配错误答案

【问题标题】：Material DateTimePicker onChange Typescript mismatch errorMaterial DateTimePicker onChange Typescript 不匹配错误
【发布时间】：2020-10-08 15:20:24
【问题描述】：

我有一个以下 React + Material DatePicker 代码，字面意思是from the respective documentation。

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 的新手，如何避免这个错误？

【问题讨论】：

你的 tsconfig.json 是什么？
@demkovych 我已将其添加到问题中。
检查这个：material-ui.com/guides/typescript
不，没有帮助。
我认为它使用了引擎盖下的时刻。你试过了吗：useState(momen(new Date()))

标签： reactjs typescript material-ui

【解决方案1】：

对我来说，将我的类型设置为：

startsAt: Date | Moment | null;

【讨论】：

【解决方案2】：

导入 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;

【讨论】：

【解决方案3】：

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

工作示例：

const [date, setDate] = React.useState<Date | null>(new Date());

return (
  <DatePicker
    value={date} 
    onChange={newDate => setDate(newDate)} 
  />
)

【讨论】：

非常感谢，很高兴在这里见到作者 :) 我建议将其添加到官方文档中，因为很多人使用 TypeScript。
寻求帮助。这对我不起作用。我得到：Argument of type 'MaterialUiPickersDate' is not assignable to parameter of type 'SetStateAction<Date | null>'. Type 'Moment' is not assignable to type 'SetStateAction<Date | null>'. Type 'Moment' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 35 more.
所以你需要把 Date 改成 Moment 就可以了
Moment 类型从何而来？ @DmitriyKovalenko

【解决方案4】：

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

【讨论】：

不，没有帮助