Reactjs 瞬间js，反应：月渲染问题

“我的日历”成功地渲染了第一个月，但在单击“下一个月”或“上一个月”后，它将不会渲染新的月份或之后的任何月份。我的猜测是，要么是渲染问题，要么是矩.js仍然存在一些我不知道的问题。我尝试过使用不同的方法让CalendarComponents知道CurrentMonth发生了变化（因此需要重新渲染），最近的尝试是MemorizedValue

在我看来，要么是渲染问题，要么是moment.js的问题，我现在还没有看到。任何帮助都将不胜感激

这是我的密码：

import React, { useState, useEffect, useRef, useMemo } from 'react';
import '../App.css';
import moment from 'moment';

const App = () => {
    const [state, setState] = useState({
        currentMonth: moment().format('YYYY-MM-DD'),
        currentWeek: moment().weeks(),
        selectedDate: moment().format('YYYY-MM-DD'),
        startDate: moment().format('YYYY-MM-DD')
    });


    const renderHeader = () => {


        return (
            <div className="header row flex-middle">
                <div className="col col-start">
                    <div className="icon" onClick={prevMonth}>
                        Previous month
          </div>
                </div>
                <div className="col col-center">
                    <span>{moment(state.currentMonth).clone().format('MMMM-YYYY')}</span>
                </div>
                <div className="col col-end" onClick={nextMonth}>
                    <div className="icon">Next month</div>
                </div>
            </div>
        );
    }

    const renderWeekDays = () => {
        const days = [];
        const weekDays = moment.weekdays();

        for (let i = 0; i < 7; i++) {
            days.push(
                <div className="col col-center" key={i}>
                    {weekDays[i]}
                </div>
            );
        };

        return <div className="days row">{days}</div>;
    }

    const renderCells = () => {
        const monthStart = moment(state.currentMonth).clone().startOf('month').format('YYYY-MM-DD');
        const monthEnd = moment(monthStart).clone().endOf('month').format('YYYY-MM-DD');
        const startDate = moment(monthStart).clone().startOf('week').format('YYYY-MM-DD');
        const endDate = moment(monthEnd).clone().endOf('week').format('YYYY-MM-DD');



        console.log(endDate);

        const rows = [];

        let days = [];
        let day = startDate;
        console.log(day);
        let formattedDate = "";

        while (day <= endDate) {
            for (let i = 0; i < 7; i++) {
                formattedDate = moment(day).format('DD');
                const cloneDay = day;
                days.push(
                    <div
                        className={`col cell ${
                            !moment(day).isSame(monthStart, 'month')
                                ? "disabled"
                                : null
                            }`}
                        key={day}
                    >
                        <span className="number">{formattedDate}</span>
                    </div>
                );
                day = moment(day).add(1, 'days').format('YYYY-MM-DD');
            }
            rows.push(
                <div className="row" key={day}>
                    {days}
                </div>
            );
            days = [];
        }
        return <div className="body">{rows}</div>;
    }


    const nextMonth = () => {
        setState({
            currentMonth: moment(state.currentMonth).add(1, 'month').format('YYYY-MM-DD')
        });
    };

    const prevMonth = () => {
        setState({
            currentMonth: moment(state.currentMonth).subtract(1, 'month').format('YYYY-MM-DD')
        });
    };


    const CalendarComponents = ({ date }) => {

        const monthCalendar = () => {

            return (
                <div className="calendar" style={{ height: '1000px' }}>
                    {renderHeader()}
                    {renderWeekDays()}
                    {renderCells()}
                </div>
            )
        };

        const memoizedValue = useMemo(() => monthCalendar(), [state.currentMonth]);



        return memoizedValue;

    }


    const handleDate = (e) => {
      console.log(e);
    }


    return (
        <div className="calendar" style={{ height: '1000px' }}>
            <CalendarComponents />
        </div>
    )
}

export default App;

import React，{useState，useffect，useRef，usemo}来自“React”；
导入“../App.css”；
从“力矩”中导入力矩；
常量应用=（）=>{
常量[状态，设置状态]=使用状态({
currentMonth:moment（）.格式（'YYYY-MM-DD'），
currentWeek:moment（）.weeks（），
selectedDate:moment（）.格式（'YYYY-MM-DD'），
startDate:moment（）.格式（'YYYY-MM-DD'）
});
const renderHeader=（）=>{
返回(
上月
{矩（state.currentmount.clone（）.format（'MMMM-YYYY'）}
下个月
);
}
const renderWeekDays=（）=>{
常数天数=[]；
const weekDays=矩.weekDays（）；
for（设i=0；i<7；i++）{
推(
{工作日[i]}
);
};
返回{天}；
}
const renderCells=（）=>{
const monthStart=moment（state.currentmount.clone（）.startOf（'month'）。格式（'YYYY-MM-DD'）；
const monthEnd=moment（monthStart）.clone（）.endOf（'month'）.format（'yyyyy-MM-DD'）；
const startDate=moment（monthStart）.clone（）.startOf（'week'）.format（'YYYY-MM-DD'）；
const endDate=moment（monthEnd）.clone（）.endOf（'week'）.format（'yyyyy-MM-DD'）；
console.log（endDate）；
常量行=[]；
让天数=[]；
让天=开始日期；
控制台日志（天）；
设formattedDate=“”；
白天{
设定状态({
currentMonth:时刻（state.currentmount）.add（1，'month'）.format（'yyyyy-MM-DD'））
});
};
const prevMonth=（）=>{
设定状态({
currentMonth：时刻（state.currentMonth）.subtract（1，'month'）.format（'YYYY-MM-DD'））
});
};
常量日历组件=（{date}）=>{
const monthCalendar=（）=>{
返回(
{renderHeader（）}
{renderWeekDays（）}
{renderCells（）}
)
};
const memoizedValue=useMemo（（）=>monthCalendar（），[state.currentMonth]）；
返回memorizedValue；
}
常数handleDate=（e）=>{
控制台日志（e）；
}
返回(
)
}
导出默认应用程序；

---

提前感谢。

您是否已登录以确保状态确实在更新？这似乎是一个渲染问题，因为当我在我的机器上使用类似于此的矩时，它工作正常。感谢您的快速回复！是的，每当单击“下个月”或“上个月”时，currentMonth都会更新，并且它会正确地进行控制台日志记录。记录新的月份。如果它确实是渲染问题，我想知道如何在更改月份时使其正确更新？再次感谢。我在没有css文件的情况下运行了您的代码（因为我没有css文件），它对我有效。单击“下一个月/上一个月”会更改月份。我将问题追溯到css文件中的这一特定位：.calendar.body.col{flex-grow:0；flex-basis:calc（100%/7）；width:calc（100%/7）；height:calc（100&/7）；}早些时候，当我希望这些列按高度缩放时（我需要根据用户使用一定数量的框填充日历日），我使用了height:calc（100%/7）；当按下“下一步”或“上一步”时，它会破坏视图。这是一个早期的测试，以查看发生了什么，但在css文件中被忘记。当我删除它时，它开始正常工作。非常感谢您的帮助！您是否登录以确保状态实际正在更新？似乎是一个渲染问题，因为当我使用就像在我的机器上这样的时刻，它工作正常。感谢您的快速回复！是的，每当单击“下个月”或“上个月”时，currentMonth都会更新，并且它会正确地记录新的月份。如果它确实是渲染问题，我想知道如何在更改月份时正确地更新它？再次感谢。我运行了您的代码，但没有他有一个css文件（因为我没有它），它对我有效。单击下一个月/上一个月的更改monthI将问题追溯到css文件中的这个特定位置：.calendar.body.col{flex grow:0；flex basis:calc（100%/7）；width:calc（100%/7）；height:calc（100&/7）；}早些时候，当我希望这些列按高度缩放时（我需要根据用户使用一定数量的框来填充日历日）我使用了height:calc（100%/7）；当按下next或previous时，它会破坏视图。这是一个早期的测试，以查看发生了什么，但在css文件中被忘记了。当我删除时，它开始正常工作。非常感谢您的帮助！