Question

我正在尝试找出导致 useEffect 循环的原因。当 dependency array 为空时，应用程序运行良好，但每当我想将 month 放入其中以在每次更改时重新呈现时，我都没有运气。

我认为 Date ( ) 正在使我的 useEffect 循环，因为它每时每刻都在变化，但我不确定。

我首先存储今天的日期信息：

    import getCalendar from "../services/calendarFinal"; // used in useEffect - returns object
    import months from "../services/months"; // used in useEffect - returns object
    
    const actualMonthValue = new Date().getMonth() + 1;
    const todayValue = new Date().getDay();
    const actualYear = new Date().getFullYear();
    const monthNames = months;

然后设置初始状态：

     const [displayDays, setDisplayDays] = useState({});
        const [today, setToday] = useState(todayValue);
        const [year, setYear] = useState(actualYear);
        const [month, setMonth] = useState({
            value: actualMonthValue,
            name: "",
        });

然后将状态数据转化为useEffect：

useEffect(() => {
    const monthData = getCalendar(today, month.value, year); // this method also uses new Date ( );
    setDisplayDays(monthData);

    const filteredMonth = monthNames.filter(
    (m) => m.index === month.value
    );
    const monthName = filteredMonth[0].month;

    setMonth({
    ...month,
    name: monthName,
    });

}, [month]); // this is causing loop

还有 getCalendar 方法，以防万一：

const getCalendar = (day, month, year) => {
  const lastMonthDays = getLastMonth(month, year);
  const actualMonthDays = getActualMonth(month, year);
  const nextMonthDays = getNextMonth(lastMonthDays, actualMonthDays);
  const calendar = [...lastMonthDays, ...actualMonthDays, ...nextMonthDays];
  const arrangedCalendar = chunkByWeek(calendar);

  return arrangedCalendar;
};

const getLastMonth = (month, year) => {
  const actualMonthStartDay = new Date(year, month - 1).getDay();
  let lastMonth = [];
  let lastMonthDays = new Date(year, month - 1, 0).getDate();
  for (i = lastMonthDays; i > lastMonthDays - actualMonthStartDay; i--) {
    lastMonth.unshift([i, false]);
  }
  return lastMonth;
};

let i = 0;

const getActualMonth = (month, year) => {
  const actualMonthDays = new Date(year, month, 0).getDate();
  let actualMonthArray = [];
  for (i = 0; i < actualMonthDays; i++) {
    actualMonthArray.push([i + 1, true]);
  }
  return actualMonthArray;
};

const getNextMonth = (lastMonth, actualMonth) => {
  const partialCalendar = [...lastMonth, ...actualMonth];
  /* 42 days inside the calendar table */
  const nextMonthDays = 42 - partialCalendar.length;
  const getNextMonthArray = actualMonth.slice(0, nextMonthDays);
  const nextMonthArray = getNextMonthArray.map(([key, value]) => [key, false]);
  return nextMonthArray;
};

const chunkByWeek = (calendar) => {
  const chunkedCalendar = [];
  for (i = 0; i < 42; i += 7) {
    const sliced = calendar.slice(i, i + 7);
    const slicedObj = sliced.map(([key, value]) => {
      return {
        day: key,
        actualMonth: value,
      };
    });
    chunkedCalendar.push(slicedObj);
  }
  return chunkedCalendar;
};

export default getCalendar;

由于新的 Date ( ) - 依赖数组，UseEffect 钩子循环

0 个答案: