使用Day.js创建React日历数组时遇map读取undefined报错问题

以下是几种常见的原因：

• 初始状态未正确初始化
  你在App中使用useState时，可能没有给monthData设置正确的初始值（比如写成了const [monthData, setMonthData] = useState()，而不是useState([])或者直接初始化useState(getMonth())）。组件首次渲染时，props传递给Month的是undefined，此时调用map就会触发报错。而console.log能输出数组，是因为后续getMonth生成数据后，组件更新并打印了最新的状态值，但首次渲染的报错已经发生了。

• 数据生成时机存在异步延迟
  如果getMonth函数是异步执行的（比如依赖接口请求、定时器或者其他异步操作生成月历数据），那么App组件首次渲染时，setMonthData还没被调用，Month组件接收到的props还是初始的undefined。console.log是在组件更新后执行的，所以能看到正确的数组，但首次渲染时map已经执行，自然会报错。

• props传递或读取时的名称不匹配
  检查App中给Month组件传递props的名称，比如App里写的是<Month calendarData={monthData} />，但Month组件里却尝试读取props.monthData.map(...)，变量名不匹配会导致读取到undefined。这种场景下，console.log可能打印的是正确的props字段（比如console.log(props.calendarData)），但渲染时用错了变量名。

• 缺少数据存在性判断
  即使后续数据会加载完成，组件首次渲染时没有先判断数据是否存在就直接调用map。比如直接写{monthData.map(...)}，而没有做{monthData && monthData.map(...)}或者{Array.isArray(monthData) && monthData.map(...)}的判断。console.log能输出是因为组件更新后数据已存在，但首次渲染时数据还未准备好，map调用就触发了错误。

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