react-datepicker TS类型错误：Date|null无法赋值给SetStateAction<Date>

错误根源清晰：react-datepicker的onChange回调返回的参数类型是Date | null，但你的useState因初始值为new Date()，被TS自动推断为仅接受Date类型的状态。当回调返回null时，无法匹配状态的类型约束，触发类型错误。

以下是几种可行的修正方案：

方案一：显式允许状态为null #

直接声明状态类型为Date | null，让setStartDate可以接受null参数：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

function App() { 
  // 显式指定状态支持Date或null类型
  const [startDate, setStartDate] = useState<Date | null>(new Date())

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

export default App;

方案二：回调中过滤null值 #

如果业务逻辑不允许状态为null，可以在onChange里做判断，仅当date有效时更新状态：

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) => {
             // 仅当date不为null时执行状态更新
             if (date) {
               setStartDate(date);
             }
           }} 
         />
    </div>
  );
}

export default App;

方案三：函数式更新保留原有状态 #

如果希望在date为null时保持当前状态，可以用函数式更新语法：

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) => {
             // date为null时，沿用之前的状态值
             setStartDate(prev => date ?? prev);
           }} 
         />
    </div>
  );
}

export default App;

补充说明 #

CodeSandbox能正常运行，大概率是因为其默认TS配置关闭了严格空值检查（strictNullChecks: false），而你的本地项目开启了该规则，所以触发了错误。不建议为了规避错误关闭严格检查，优先通过代码层面解决类型不兼容问题，保障代码的类型安全性。

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