reactjs - 使用 useState reactjs 更改日期
问题描述
app.js 文件
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());
nextDate = nextDate.setDate(nextDate.getDate() + 1);
setDay(nextDate);
}
return (
<>
<Router>
<Header/>
</Router>
<Day
date={currentDay}
nextDay={nextDay}/>
</>
)
}
day.js 文件包含 Day - 组件
import React from 'react';
import Moment from 'react-moment';
import './day.css';
export default function Day({date, nextDay}) {
return (
<div className="day-container">
<Moment>{date}</Moment>
<span onClick={() => nextDay()}>next</span>
</div>
)
}
单击下一步后,日期对象变为时间戳,第二次单击后抛出错误(currentDay.getTime 不是函数)我不明白这是为什么。
解决方案
Date.prototype.setDate更新日期并返回日期的纪元值。
您不需要返回值,只需执行以下操作:
let nextDate = new Date(currentDay.getTime());
nextDate.setDate(nextDate.getDate() + 1);
setDay(nextDate);
您的原始变量仍然可以使用。
推荐阅读
- postgresql - 我们可以在 postgresql 服务器的 Job Scheduling 中获取作业列表吗?
- tibco - 收到异常[尝试加载证书时:服务器证书无效]]
- r - R中的正则表达式提取两个匹配字符串之间的部分(不是意图)
- python - 熊猫扭曲 html 表格
- bash - 如何为名称在bash中的变量中的变量赋值?
- android - 如何销毁 CountdownTimer 的实例?
- python-3.x - 如何将 AWS 托管策略附加到 cloudformation 和对流层中的角色
- regex - 匹配 Perl 表达式的正则表达式?
- vector - 如何在不分配内存的情况下从 vec 中变异和删除元素?
- mapbox - Mapbox 挤压在 Android 中显示,但在 iOS 中不显示