反应：'Maximum update depth exceeded' 使用完整日历

Question

我正在使用FullCalendar进行react，我正在与状态作斗争。。。。它返回以下消息：

错误：超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制了嵌套更新的数量，以防止无限循环。

我删除了代码中所有不必要的部分。

import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
const Top = () => {
// Calendar info stored in state
const [calendarEvents, setCalendarEvents] = useState([]);
// method to retrieve dates
const getEventsForThisMonth = () => {
const events = [];
events.push({
title: "test",
date: '2021-03-25',
});
return events;
};
useEffect(() => {
const eventsCollected = getEventsForThisMonth();
setCalendarEvents(eventsCollected);
}, [calendarEvents]);
return (
<>
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
events={calendarEvents}
locale="ja"
/>
</>
);
};
export default Top;

如果你想让我提供更多信息，请告诉我。欢迎任何反馈/想法！感谢

Answer 1

这是因为当useEffect本身更改状态时，useEffect具有状态的依赖性。
当您的useEffect运行时->它改变状态->更改后的状态将触发useEffect运行->
它会导致一个无限循环
要修复它，请根据需要更改useEffect的依赖关系。也许将setCalendarEvents放在getEventsForThisMonth函数中，并在onChange事件中使用此函数。

Answer 2

如前所述，您正在触发一个具有calendarEvents依赖项的useEffect，它将再次设置日历事件(setCalendarEvents(的状态，它也将再次触发useEffect，依此类推…创建一个无限循环。

如果想避免它保留您的变通方法，您可能需要在第一次内设置事件，使用空deps的useEffect([](:

import React, { useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
const Top = () => {
// Calendar info stored in state
const [calendarEvents, setCalendarEvents] = useState([]);
// method to retrieve dates
const getEventsForThisMonth = () => {
const events = [];
events.push({
title: "test",
date: '2021-03-25',
});
return events;
};

useEffect(()=>{
const eventsCollected = getEventsForThisMonth();
setCalendarEvents(eventsCollected);
}, [])
return (
<>
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
events={calendarEvents}
locale="ja"
/>
</>
);
};
export default Top;