javascript 使用dayjs创建的数组输出未定义的元素

vq8itlhq  于 2022-12-10  发布在  Java
关注(0)|答案(1)|浏览(160)

我正在尝试使用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;
3gtaxfhh

3gtaxfhh1#

unable to read properties of undefined reading map当您尝试循环或使用map方法行程未定义的值时,可能会发生这种错误。若要解决这个问题,您可以使用选择性链接(?.)。
在您的情况下,您需要在Month组件中使用它,如下所示:

{month?.map((row, i) => (
        <Fragment key={i}>
          {row?.map((day, j) => (
            <Day day={day} key={j} />
          ))}
        </Fragment>
      ))}

告诉我这是否适合你。

相关问题