在组件 return 中遍历数组后 React 应用冻结

Question

我正在为我的 React 应用程序添加日历功能。我正在使用 this tutorial to do it. I'm trying to use Day.js 而不是 Moment，因为 Moment 处于旧模式，而 Day.js 是建议之一。好像大部分功能都是一样的

这是我的基本日历组件：

const Calendar = () => {
  const [value, setValue] = useState(moment());
  const [calendar, setCalendar] = useState([]);
  const startDay = value.clone().startOf("month").startOf("week");
  const endDay = value.clone().endOf("month").endOf("week");

  useEffect(() => {
    const day = startDay.clone().subtract(1, "day");
    const a = [];
    while (day.isBefore(endDay, "day")) {
      a.push(
        Array(7)
          .fill(0)
          .map(() => day.add(1, "day").clone())
      );
    }
    setCalendar(a);
  }, [value]);

  return (
    <>
      <h1>Calendar will go here.</h1>
      <div>
        {calendar.map((week) => {
          return (
            <div>
              {week.map((day) => {
                return <div>{day.format("D").toString()}</div>;
              })}
            </div>
          );
        })}
      </div>
    </>
  );

在我开始通过 calendar 数组进行映射之前，我在 return 中只有 <h1> 标记，并且组件按我预期的方式呈现。我之前也打印出了 startDay 和 endDay 的值。但是，当我包含映射日历数组的逻辑时，整个应用程序都会锁定我。我必须注释掉该代码并重新启动我的服务器以重置所有内容。我无法弄清楚问题出在哪里。

Answer 1

我的猜测是 day.isBefore(endDay, "day") 条件永远不会满足。我怀疑 day.add(1, "day") 实际上改变了 day 变量：它最有可能 returns 一个新实例。

刚刚检查了 add 的文档：

"Returns a cloned Day.js object with a specified amount of time added."

这意味着您需要使用 let 来声明 day 变量，并在添加天数时 re-assign 它。

在组件 return 中遍历数组后 React 应用冻结

React app freezing after iterating over array in component return

javascript

reactjs

dayjs