React中不可变处理State内Moment对象格式化触发类型错误

问题分析 #

你碰到的TypeError: newState.startDate.format is not a function错误，核心原因是用对象扩展运算符{ ...this.state.startDate }复制moment对象的方式不对。moment是类的实例，扩展运算符只能复制它的可枚举普通属性，没法完整拷贝moment实例自带的方法（比如format），所以复制后的newState.startDate已经不是有效的moment对象了，自然调用不了format方法。

而且你的需求是把moment对象转成字符串存入数据库，其实根本不需要复制moment实例，直接基于原state里的moment对象生成字符串就行，完全不会修改原state。

修正后的代码 #

handleSubmit(event) {
  event.preventDefault();
  // 直接基于原state的moment对象生成格式化字符串，不修改原state
  const submitData = { 
    ...this.state, 
    startDate: this.state.startDate.format('YYYY-MM-DD') 
  };
  
  this.RegisterEmployeeService.registerEmployee(submitData)
    .then((res) => {
      Swal('Registered!');
    });
}

为什么这样可行？ #

• 扩展运算符{ ...this.state }会复制原state的所有属性，之后我们覆盖startDate为格式化后的字符串，原state里的startDate仍然是moment对象，完全不影响React DatePicker的正常使用。
• 这种方式既满足了"不可变"的要求（没有修改原state），又直接得到了适合存入数据库的字符串格式。

额外说明：如果需要复制moment实例怎么办？ #

如果之后还有操作moment对象的需求，正确复制moment实例的方式是使用moment自带的clone方法：

const clonedMoment = this.state.startDate.clone();
// 此时clonedMoment是一个独立的moment实例，可以正常调用format等方法
console.log(clonedMoment.format('YYYY-MM-DD'));

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