使用react-datepicker遇Cannot read properties of undefined错误求助

核心问题分析 #

1. onChange参数误解：react-datepicker的onChange回调传递的是Date对象，不是DOM事件，所以你之前用event.target.value必然报错，因为根本没有这个属性。
2. 初始状态类型不匹配：组件要求selected属性的值是Date对象或null，你初始设为空字符串""，会导致组件内部状态处理异常，触发报错。
3. 状态更新函数无返回值：setStartDate是状态更新函数，本身没有返回值，所以const gettodate = setStartDate(...)得到的永远是undefined。

修正后的代码 #

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { format } from "date-fns"; // 用date-fns做日期格式化，可替换为其他库或自定义函数

import "react-datepicker/dist/react-datepicker.css";

const DatePick = () => {
  // 初始状态设为null，符合组件要求的类型
  const [startDate, setStartDate] = useState(null);

  const startDateHandler = (date) => {
    setStartDate(date);
    // 如需格式化后的yyyyMMdd字符串，在这里处理
    if (date) {
      const formattedDate = format(date, "yyyyMMdd");
      console.log("选中的格式化日期：", formattedDate);
    }
  };

  return (
    <DatePicker 
      selected={startDate} 
      onChange={startDateHandler} 
      dateFormat={"yyyyMMdd"} 
      showYearDropdown 
      scrollableMonthYearDropdown 
    />
  );
};

export default DatePick;

关键修改说明 #

• 调整初始状态：把useState("")改为useState(null)，和组件selected属性要求的类型匹配。
• 正确处理onChange回调：直接接收date参数（Date对象），用它更新状态。
• 日期格式化：如果需要获取yyyyMMdd格式的字符串，用日期库（比如date-fns）或自定义函数处理Date对象即可。

自定义格式化函数（无需额外库） #

如果不想引入date-fns，可使用以下自定义函数：

const formatToYYYYMMDD = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}${month}${day}`;
};

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