如何解决在组件返回中遍历数组后,React应用冻结
我正在为我的React应用程序添加日历功能。我正在使用this教程来做。我正在尝试使用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
的值。但是,当我包括映射到日历数组的逻辑时,整个应用程序将锁定我。我必须注释掉该代码,然后重新启动服务器以重置所有内容。我在弄清楚问题出在哪里。
解决方法
我的猜测是永远不会满足day.isBefore(endDay,"day")
条件。我怀疑day.add(1,"day")
实际上会突变day
变量:大多数likley返回一个新实例。
只需检查文档中的add
:
“以指定的时间返回克隆的Day.js对象 已添加。”
这意味着您需要使用let
来声明day
变量,并在添加天数时重新分配它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。