React使用useState切换日期时报错getTime is not a function如何解决

问题原因 #

Date对象的setDate()方法返回值为修改后日期对应的毫秒级时间戳（数字类型），而非修改后的Date实例。你的代码中错误将setDate()的返回值重新赋值给了nextDate变量，导致第一次调用setDay后，currentDay状态从原本的Date对象变成了数字类型的时间戳。

第二次点击触发nextDay时，你尝试调用数字类型currentDay的getTime()方法，数字本身没有这个方法，因此抛出currentDay.getTime is not a function错误。

修复方案 #

修改app.js中的nextDay函数，不要接收setDate()的返回值，直接将修改后的Date实例传入setDay即可，修改后代码如下：

import React, { useState } from 'react';
import Header from '../header/header';
import Day from '../day/day'
import {BrowserRouter as Router} from 'react-router-dom';
import './app.css';

export default function App() {
  const [currentDay, setDay] = useState(new Date());
  console.log(currentDay)
  function nextDay() {
    console.log("next clicked");
    let nextDate = new Date(currentDay.getTime());
    // 直接调用setDate修改新创建的Date实例，不要重新赋值给nextDate
    nextDate.setDate(nextDate.getDate() + 1);
    setDay(nextDate);
  }
  return (
    <>
      <Router>
        <Header/>
      </Router>
      <Day 
        date={currentDay}
        nextDay={nextDay}
      />
    </>
  )
}

day.js组件无需修改即可正常运行。

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