react-calendar onChange:没有重载匹配这个调用错误

Question

我使用了响应日历库。

默认代码突然给出一个onChange prop错误。我该怎么办?(以前可以)

我的代码' import React， {useState} from ' React ';从"react-calendar";

函数App() {

const [value, onChange] = useState(new Date());
return (
<div>
<Calendar
onChange={onChange}
value={value}
/>
</div>
);

}

导出默认App; '

错误消息

TS2769:没有重载匹配这个调用。重载1 (2)，'(props: CalendarProps | Readonly): Calendar'，给出以下错误。类型'Dispatch'不能分配给类型'(value: value, event: MouseEvent<HTMLButtonElement,>) =>无效"。参数'value'和'value'的类型不兼容。类型"Value"不能赋值给类型"SetStateAction"。类型'null'不能赋值给类型'SetStateAction'。重载2的2，'(props: CalendarProps, context: any): Calendar'，给出以下错误。类型'Dispatch'不能分配给类型'(value: value, event: MouseEvent<HTMLButtonElement,>) =>空白"。

我检查了npm版本，配置文件并重新安装。但它仍然不工作。

Answer 1

您没有为value提供正确的类型，该类型为:

type ValuePiece = Date | null;
export type Value = ValuePiece | [ValuePiece, ValuePiece];

所以为了解决这个问题，将你的状态类型更改为:

type  ValuePiece = Date|null;
function App() {
const [value, onChange] = useState<ValuePiece|[ValuePiece,ValuePiece]>(new Date());
return (
<div className="App">
<Calendar value={value} onChange={onChange} selectRange={false}/>
</div>
);
}
export default App;

如果你不想使用类型将你的文件从App.tsx重命名为App.js