[错误][反应日期选择器]类型为"日期 |null' 不可分配给类型为"SetStateAction<Date>？

Question

1. 安装库，使用react-datepicker，并获得公文样例代码。

2. 我在Vcode中编写了官方文档的代码，所以我认为它会像官方文档一样工作。

3. 然而，它在标题中显示了一个错误信息，并确定了一个无法呈现的问题

4. 现有项目是否有影响?然后，创建了一个新项目，只安装了库，并执行了反应，但是发生了相同的错误。

5. 那么，如果CodeSandbox有相同的环境，这里会有一个错误吗?我检查过了，但它在CodeSandbox上工作得很好。

6. tscconfig.json也统一了CodeSandbox，但状态没有变化。

package.json

"@types/react-datepicker": "^4.8.0",
"react": "^18.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",

错误消息

TS2345: Argument of type 'Date | null' is not assignable to parameter of type 'SetStateAction<Date>'.
Type 'null' is not assignable to type 'SetStateAction<Date>'.
return (
10 |     <div className="App">
> 11 |          <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
|                                                                            ^^^^
12 |     </div>
13 |   );
14 | }

错误码(VS Code)

import React, {useState} from 'react';
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
function App() { 
const [startDate, setStartDate] = useState(new Date())

return (
<div className="App">
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} /> 
</div>
);
}
export default App;

但是它在这里太好用了。即使我匹配代码和框tsconfig.json，错误仍然发生，我应该如何纠正?

Answer 1

设置

时添加if条件

onChange={(date) => {
if(date) setStartDate(date)
}}

或者如果你想在useState中支持空值，在这里更新

const [startDate, setStartDate] = useState<Date| null>(new Date())