React中格式化moment日期赋值参数报date.get is not a function求助

错误原因 #

1. 你直接修改了来自props的listParams对象：React中props是只读的，且对象为引用类型，你直接修改属性会同步影响父组件中存储的原对象。
2. 父组件同时将listParams中的start_date/end_date传递给了DatePicker组件，DatePicker默认期望接收moment类型的值，你将这两个字段改为字符串后，DatePicker调用getMonth等moment内置方法时就会抛出date.get is not a function的错误。

解决方案 #

你需要格式化参数传给API时，不要直接修改原props对象，先拷贝一份新的参数对象再做修改，避免影响其他依赖原参数的组件：

// 浅拷贝原props的listParams，修改新对象不会影响原props
const params = {...this.props.listParams};
// 注意你需要的是DD-MM-YYYY格式，不要写错format参数
const startDate = params.start_date.format('DD-MM-YYYY');
const endDate = params.end_date.format('DD-MM-YYYY');
params.start_date = startDate;
params.end_date = endDate;
// 直接用拷贝修改后的params调用API即可
console.log(startDate, endDate);

额外注意 #

如果你的组件内部需要经常修改查询参数，建议将props传递的listParams同步到组件内部state中，后续所有修改都操作state，避免直接修改props导致的意外问题。

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