0

我正在为我的 React 应用程序添加日历功能。我正在使用本教程来做到这一点。我正在尝试使用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数组之前，我只有<h1>返回中的标签，并且组件按预期呈现。我之前还打印了 和 的startDay值endDay。但是，当我包含映射日历数组的逻辑时，整个应用程序都会锁定我。我必须注释掉该代码并重新启动我的服务器以重置所有内容。我很难弄清楚问题是什么。

4

1 回答 1

1

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

刚刚检查了文档add：

“返回一个克隆的 Day.js 对象，并添加了指定的时间量。”

这意味着您将需要使用let来声明day变量并在添加天数时重新分配它。

于 2020-10-12T02:54:16.847 回答