react-calendar onChange报TS2769类型错误，该如何解决？

错误原因 #

react-calendar的onChange回调参数类型为Value（即Date | Date[] | null），而你直接传入的useState生成的状态更新函数仅接受Date或返回Date的函数，两者类型不兼容，导致TypeScript报错。

解决方案 #

方案1：兼容null类型（推荐） #

调整useState的状态类型，匹配react-calendar的返回值类型：

import React, { useState } from 'react';
import Calendar from "react-calendar";

function App() {
    // 明确状态类型为 Date | null，适配react-calendar的返回值
    const [value, setValue] = useState<Date | null>(new Date());

    return (
        <div>
            <Calendar
                onChange={setValue}
                value={value}
            />
        </div>
    );
}

export default App;

方案2：包装回调过滤非Date值 #

如果不想让状态接受null，可以包装onChange函数，仅处理有效Date值：

import React, { useState } from 'react';
import Calendar from "react-calendar";
import type { Value } from 'react-calendar';

function App() {
    const [value, setValue] = useState(new Date());

    const handleCalendarChange = (newValue: Value) => {
        // 仅当返回值是单个Date时更新状态
        if (newValue instanceof Date) {
            setValue(newValue);
        }
        // 可选：处理null或日期数组的情况，比如设置默认值
    };

    return (
        <div>
            <Calendar
                onChange={handleCalendarChange}
                value={value}
            />
        </div>
    );
}

export default App;

额外说明 #

如果使用多选模式（设置selectRange={true}），Value类型会变为Date[]，需要将useState的类型调整为Date[]：

const [value, setValue] = useState<Date[]>([]);

内容的提问来源于stack exchange，提问作者Ayeon Jeong