React中useState存储Moment数组报类型不匹配错误如何解决

你初始化yearperiod状态时的初始值是Moment对象数组，TS自动推导该状态的类型为Moment[]。但你往timeValues中push的是interim.format('MM-YYYY')生成的字符串，最终传入setYearPeriod的是string[]类型，两者类型不匹配触发报错。

根据你的实际业务需求选择对应方案即可：

场景1：需要状态中存储Moment对象 #

修改循环内的push逻辑，不要调用format生成字符串，直接push克隆后的Moment对象（避免引用指向同一个interim变量，后续interim修改影响数组内已存的对象）：

while (dateEnd > interim || interim.format('MM') === dateEnd.format('MM')) {
  timeValues.push(interim.clone());
  interim.add(1,'month');
}

需要展示MM-YYYY格式时，读取yearperiod的对应项后调用.format('MM-YYYY')即可。

场景2：实际需要状态中存储MM-YYYY格式的字符串 #

修改useState的初始化逻辑，把初始值也转成对应格式的字符串，让TS自动推导状态类型为string[]：

const [yearperiod, setYearPeriod ] = React.useState([moment("2021-09-09").format('MM-YYYY')])

• React项目不推荐直接用document.getElementById获取输入框值，建议把日期输入改为受控组件，通过useState绑定输入框的value和onChange事件取值，避免DOM操作带来的状态不同步问题。
• 已经对startdate、enddate做了as HTMLInputElement类型断言的情况下，可以移除any标注，获得更完整的类型校验能力。

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