我正在尝试使用dayJs库制作一个react日历,我使用以下代码为月份创建一个二维数组:
import dayjs from "dayjs";
export const getMonth = (month = dayjs().month()) => {
const year = dayjs().year();
const firstDayOfMonth = dayjs(new Date(year, month, 1)).day();
let currentMonthCount = 0 - firstDayOfMonth;
const daysMatrix = new Array(5).fill([]).map(() => {
return new Array(7).fill(null).map(() => {
currentMonthCount++
return dayjs(new Date(year, month, currentMonthCount))
})
});
return daysMatrix;
};
现在,当我在app.js文件中导入函数并将其传递给另一个组件month.js
时,该组件将使用以下代码显示数组:
import React, { Fragment } from 'react';
import Day from '../components/Day';
const Month = ({ month }) => {
if(month) {
month.map((e) => console.log(e));
}
return (
<div className='flex-1 grid grid-cols-7 grid-rows-5'>
{month.map((row, i) => (
<Fragment key={i}>
{row.map((day, j) => (
<Day day={day} key={j} />
))}
</Fragment>
))}
</div>
)
};
export default Month;
在这里,控制台日志输出了月份数组,但我在返回部分中得到了错误,显示为unable to read properties of undefined reading map
,有人能解释一下为什么尽管console.log语句的Map工作正常,但我还是得到了这个错误吗?
我的app.js文件:
import React, { useState } from 'react';
import './App.css';
import { getMonth } from './util';
import { Fragment } from 'react';
import CalendarHeader from './components/CalendarHeader';
import Sidebar from './components/Month';
import Month from './components/Month';
function App() {
const [currentMonth, setCurrentMonth] = useState(getMonth());
return (
<Fragment>
<div className='h-screen flex flex-col' >
<CalendarHeader />
<div className="flex flex-1">
<Sidebar />
<Month month={currentMonth} />
</div>
</div>
</Fragment>
);
}
export default App;
1条答案
按热度按时间3gtaxfhh1#
unable to read properties of undefined reading map
当您尝试循环或使用map
方法行程未定义的值时,可能会发生这种错误。若要解决这个问题,您可以使用选择性链接(?.)。在您的情况下,您需要在
Month
组件中使用它,如下所示:告诉我这是否适合你。