反应：FullCalendar“超过最大更新深度”

Question

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

错误：超过最大更新深度。当组件在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

如前所述，您正在使用calendarEvents依赖项触发useEffect，这将再次设置日历事件的状态（ >），这也将再次触发useEfect，以此类推……创建一个无限循环。

如果想避免它保留您的解决方法，您可能需要在第一次设置事件，使用带有空deps（[]）的useEffects：

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;

Answer 2

这是因为当使用效果本身更改状态时，您使用效果具有状态的依赖关系。
当您的使用效果运行 -