我正在努力实现这一目标：

在尝试时，我创建了一个 JavaScript 对象（类似 JSON 的对象）来访问它。这是代码：

export default [
    {
        weekMonth: 'February',
        weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
        weekDays: [ '04', '11', '18', '25'],
        weekStatus: 'Available +',
        className: 'February'
    },
    
    {
        weekMonth: 'March',
        weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
        weekDays: [ '04', '11', '18', '25'],
        weekStatus: 'Available +',
        className: 'March'
    },

    {
        weekMonth: 'April',
        weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur', 'Thur'],
        weekDays: [ '01', '08', '15', '22', '29' ],
        weekStatus: 'Available +',
        className: 'April'
    },

    {
        weekMonth: 'May',
        weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
        weekDays: [ '06', '13', '20', '27' ],
        weekStatus: 'Available +',
        className: 'May'
    }
];

现在，我正在尝试访问目标文件中的每个数据以获得图像中显示的所需结果，但效果不佳。

我如何渲染它：

import Col from "react-bootstrap/Col";
import Card from 'react-bootstrap/Card';

const Weekitem = ({
    weekMonth, weekDayofWeek, weekDays, weekStatus, className
}) => {
    return ( 
        <>
            <Col lg={3} md={3} sm={6} xs={12}>
                <h3> {weekMonth} </h3>
                    {weekDays.map((weekday) => (
                        <Card>
                            <h1> {weekday} </h1>
                            {weekDayofWeek}
                            {weekStatus}
                        </Card>
                    ))}
            </Col>
        </>
     );
}
 
export default Weekitem;

然后，我得到了这个：

可能是什么错误？请检查。但h1按预期工作。为什么是其他？谢谢。