React中生成当月日期函数返回Array(0)问题排查求助

你的genererJoursDuMois函数返回空数组的核心原因是循环条件错误：

• jour是Date对象，而dernierJourDuMois是当月最后一天的天数（数字类型，比如31）
• Date对象和数字比较时会自动转换为时间戳（毫秒级数值，远大于31），导致循环条件jour <= dernierJourDuMois一开始就不成立，循环体从未执行，最终返回空数组。

修复方案（两种可选） #

方案1：比较日期的天数而非时间戳

修改循环条件，判断当前日期的天数是否小于等于当月最后一天的天数：

const [moisActuel, setMoisActuel] = useState(new Date())

const genererJoursDuMois = () => {
    const jours = []
    const debutDuMois = new Date(
      moisActuel.getFullYear(),
      moisActuel.getMonth(),
      1
    )
    const dernierJourDuMois = new Date(
      moisActuel.getFullYear(),
      moisActuel.getMonth() + 1,
      0
    ).getDate()

    for (
      let jour = new Date(debutDuMois);
      jour.getDate() <= dernierJourDuMois; // 改为比较日期的天数
      jour.setDate(jour.getDate() + 1)
    ) {
      jours.push(new Date(jour))
    }
    return jours
  }

// 配合useMemo优化，仅当moisActuel变化时重新计算
const joursDuMois = useMemo(() => genererJoursDuMois(), [moisActuel])

方案2：将最后一天转为Date对象再比较

把dernierJourDuMois改为Date实例，直接比较两个Date对象的时间戳：

const [moisActuel, setMoisActuel] = useState(new Date())

const genererJoursDuMois = () => {
    const jours = []
    const debutDuMois = new Date(
      moisActuel.getFullYear(),
      moisActuel.getMonth(),
      1
    )
    // 改为Date对象，不再取天数
    const dernierJourDuMois = new Date(
      moisActuel.getFullYear(),
      moisActuel.getMonth() + 1,
      0
    )

    for (
      let jour = new Date(debutDuMois);
      jour <= dernierJourDuMois; // 两个Date直接比较时间戳
      jour.setDate(jour.getDate() + 1)
    ) {
      jours.push(new Date(jour))
    }
    return jours
  }

// 配合useMemo优化，仅当moisActuel变化时重新计算
const joursDuMois = useMemo(() => genererJoursDuMois(), [moisActuel])

额外优化建议 #

使用useMemo包裹日期数组的计算，确保只有当moisActuel（月份/年份）变化时才重新生成日期列表，避免不必要的重复计算，提升组件性能。

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