使用Ant Design DatePicker选起始日期后如何按余额自动设置结束日期

问题根因 #

你遇到的起始日期被连带修改的问题，核心是日期处理库的可变对象特性：
Moment.js 等传统日期库的add()方法会直接修改调用该方法的原日期实例，你直接使用原始的startDate对象执行加法操作，就会改动原有的起始日期值，最终出现连带修改的异常。

修复方案 #

操作日期前先拷贝原始的startDate对象，所有计算逻辑都在拷贝出的新实例上执行，完全不改动原始的起始日期值。

修改后的代码如下：

useEffect(() => {
  if (
    selectedLeaveId && selectedLeaveId === LeavesId.annualLeaveId && startDate
  ) {
    // 拷贝原始起始日期生成新实例，不修改原对象
    const start = startDate.clone ? startDate.clone() : new Date(startDate.valueOf());
    const directEndDate = start.add(remainingBalance, 'days');
    setEndDate(directEndDate);
  }
}, [selectedLeaveId, startDate, remainingBalance]);

补充说明 #

• 若你使用Moment.js作为日期处理库：clone()方法会生成完全独立的新日期实例，后续对新实例的所有操作都不会影响原startDate
• 若你使用Day.js作为日期处理库：本身为不可变数据结构，add()方法默认返回新实例不会修改原对象，若仍出现该问题，请排查是否有其他逻辑对startDate和endDate做了双向绑定，或者依赖项中存在其他修改startDate的逻辑
• 新增了startDate存在性校验，避免空值调用方法抛出异常

内容的提问来源于stack exchange，提问作者Ammar ALSananni