从MongoDB取日期数据返回undefined/null，无法配置antD DatePicker禁用日期

核心问题定位 #

后端路由中Consultation.find()返回的是文档数组，但你直接访问consultation.date（数组本身无date属性），导致返回undefined，最终前端拿到的response.data.data也为undefined。

步骤1：修复后端路由的日期提取逻辑 #

修改路由代码，从返回的文档数组中逐个提取date字段：

router.get("/get-all-dates", authMiddleware, async (req, res) => {
  try {
    const consultations = await Consultation.find({
      date: { $gte: "2022-11-11T00:00:00.000Z" },
    });
    // 从每个文档中提取date字段，组成数组
    const dates = consultations.map(item => item.date);
    res.status(200).send({
      message: "All Dates Fetched Successfully",
      success: true,
      data: dates, // 现在data是日期字符串数组
    });
    console.log(dates);
  } catch (error) {
    console.log(error);
    res.status(500).send({
      message: "Fetching Dates Failed",
      success: false,
      error,
    });
  }
});

步骤2：前端处理禁用日期逻辑 #

前端unavailableDates会拿到日期字符串数组，在disabledDate函数中结合原有“禁用过去日期”的逻辑，判断当前日期是否属于禁用列表：

import moment from 'moment';
const [unavailableDates, setUnavailableDates] = useState([]);

const getDateData = async () => {
  try {
    dispatch(showLoading());
    const response = await axios.get("/api/user/get-all-dates", {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    });
    dispatch(hideLoading());
    if (response.data.success) {
      setUnavailableDates(response.data.data);
      console.log(response.data.data);
    }
  } catch (error) {
    dispatch(hideLoading());
  }
};

useEffect(() => {
  getDateData();
}, []);

const disabledDate = (current) => {
  if (!current) return false;
  // 禁用过去的日期（保留原有逻辑）
  const isPast = current < moment().endOf("day");
  // 禁用数据库中返回的日期（仅比较日期部分，忽略时间）
  const isUnavailable = unavailableDates.some(dateStr => 
    moment(current).isSame(moment(dateStr), 'day')
  );
  // 满足任一条件则禁用
  return isPast || isUnavailable;
};

验证要点 #

1. 后端修改后，接口返回的data应为类似["2022-11-15T00:00:00.000Z", ...]的数组
2. 前端unavailableDates状态正确存储数组后，disabledDate会同时禁用过去日期和数据库指定日期

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