Momentjs对象可变性导致DatePicker异常(React+Antd)

今天在使用受控模式的RangePicker时遇到的bug

以下是两段完全一样的代码,唯一区别是前者使用momentjs,后者使用dayjs:

js 复制代码
import { useState } from "react";
import { DatePicker } from "antd";
import moment from "moment";

const { RangePicker } = DatePicker;

export const ControlledRangePicker = () => {
    const [selectedRange, setSelectedRange] = useState([
        moment().subtract(24, "hour"),
        moment(),
    ]);
    const handleRangeChange = (dates) => {
        if (dates) {
            setSelectedRange(dates);
        }
    };
    return (
        <div>
            <RangePicker
                value={selectedRange}
                onChange={handleRangeChange}
                showTime={{
                    format: "HH:mm",
                    hourStep: 1,
                    minuteStep: 15,
                }}
                format="YYYY-MM-DD HH:mm"
            />
        </div>
    );
};


import dayjs from "dayjs";
export const ControlledRangePicker2 = () => {
    const [selectedRange, setSelectedRange] = useState([
        dayjs().subtract(24, "hour"),
        dayjs(),
    ]);
    const handleRangeChange = (dates) => {
        if (dates) {
            setSelectedRange(dates);
        }
    };
    return (
        <div>
            <RangePicker
                value={selectedRange}
                onChange={handleRangeChange}
                showTime={{
                    format: "HH:mm",
                    hourStep: 1,
                    minuteStep: 15,
                }}
                format="YYYY-MM-DD HH:mm"
            />
        </div>
    );
};

会发现前者的日期选择面板一打开 日期就会疯狂增长,控制台重复报错:

js 复制代码
Warning: Maximum update depth exceeded. 
This can happen when a component calls setState inside useEffect,
but useEffect either doesn't have a dependency array, 
or one of the dependencies changes on every render. 

原因是 Moment 对象是可变对象(mutable),而dayjs是 不可变(immutable)的。 可以用以下代码测试:

js 复制代码
// moment可变性
const date1 = moment('2023-10-01');
const date2 = date1; // 这不是复制,而是引用同一个对象
// const date2 = date1.clone(); 正确的方式:创建副本

date1.add(1, 'day'); // 修改date1

console.log(date1.format('YYYY-MM-DD')); // 2023-10-02
console.log(date2.format('YYYY-MM-DD')); // 2023-10-02  date2也被改变了
js 复制代码
// dayjs 不可变性
const date1 = dayjs('2023-10-01');
const date2 = date1; 

const date3 = date1.add(1, 'day'); // 返回新的对象,不改变原对象

console.log(date1.format('YYYY-MM-DD')); // 2023-10-01  原对象不变
console.log(date2.format('YYYY-MM-DD')); // 2023-10-01  
console.log(date3.format('YYYY-MM-DD')); // 2023-10-02  新对象

React的渲染机制期望状态更新是可控的,但Moment.js的 mutable 特性会让状态变得不可预测 。

而且momentjs体积比dayjs大,antd v4到v5 也是从momentjs 变成了 dayjs。

相关推荐
米诺zuo1 小时前
react 中的useContext和Provider实践
前端·react.js
trsoliu5 小时前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
鹏多多5 小时前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
Amy_cx19 小时前
搭建React Native开发环境
javascript·react native·react.js
骑自行车的码农20 小时前
React 事件收集函数
前端·react.js
Pa2sw0rd丶21 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
阿民不加班1 天前
【React】打卡笔记,入门学习01:点击事件
笔记·学习·react.js
菠萝+冰1 天前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code1 天前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
九年义务漏网鲨鱼1 天前
从零学习 Agentic RL(四)—— 超越 ReAct 的线性束缚:深入解析 Tree-of-Thoughts (ToT)
前端·学习·react.js