javascript - 做噩梦试图比较 React 应用程序中的两个日期是否匹配
问题描述
正如标题所说,我正在努力让这件事发挥作用。我在这里查看了类似的帖子和许多参考 MomentJS,他们在他们自己的网站上建议现在不要使用它。
const today = new Date().toLocaleDateString('en-gb')
return loading ? <Spinner /> :
<Fragment>
<div className="calendar_events">
<p className="ce_title">Upcoming Events</p>
{
appointments.map(appointment => {
let date = new Date(appointment.date).toLocaleDateString('en-gb')
{console.log('date', typeof date)}
{console.log('today', typeof today)}
if(today == date) {
<Appointment key={appointment._id} appointment={appointment} date={date}/>
}
})
}
</div>
</div>
</Fragment>
我已经尝试过,但没有成功。我现在正在尝试香草 JS,当我 console.log 每个日期、今天和约会日期时,它们是相同的。当我 console.log 这些类型时,它们都是字符串,但我的 if 语句永远不会运行。
我只想为匹配今天日期或日历上任何其他给定日期的约会调用组件。
我意识到我在这里重新创造了轮子,但这更多是关于学习和让我的注意力从事情上转移,而不是实际的最终结果。
我很乐意为我在地球上缺少什么提供任何指导。
typeof 的控制台输出
date string Calendar.js:39
today string Calendar.js:40
每个变量的控制台输出
date 29/11/20 Calendar.js:39
today 29/11/20 Calendar.js:40 *2 as there are two demo appointments on this date.
我也尝试过==和===运算符,但 nada。
请发送帮助,我的理智已经失去了。
编辑
我想在@Uzair Ashraf 的帮助下,我设法让它工作了。
它甚至看起来更简洁地使用以下代码
{
appointments.map(appointment => {
let date = new Date(appointment.date).toLocaleDateString('en-gb')
if(today === date) {
return <Appointment key={appointment._id} appointment={appointment} />
}
})
}
解决方案
您缺少退货声明。虽然如果你没有后备,它将创建一个包含 React 元素且未定义的数组。
我建议通过数组过滤然后映射
编辑:您似乎还有一个额外的结束 div 标签。你也不需要片段
Edit2:您可以像这样拆分日期:
let date = "2020-11-29T00:00:00.000Z"
date = date.split('T')[0]
const today = new Date().toLocaleDateString('en-gb')
return loading ? <Spinner /> :
<div className="calendar_events">
<p className="ce_title">Upcoming Events</p>
{
appointments
.filter(appointment => new Date(appointment.date).toLocaleDateString('en-gb') === today)
.map(appointment => {
return <Appointment key={appointment._id} appointment={appointment} date={new Date(appointment.date).toLocaleDateString('en-gb')}/>
}
})
}
</div>
推荐阅读
- azure-devops - Azure 管道运行时评估的变量传递了一个参数
- javascript - 最简单的是在 javascript 中显示未定义的元素
- prometheus - 如何在 Prometheus 中使用时间单位创建警报?比如“最近 2 分钟平均响应时间超过 5 秒”
- python - 减去从字符串转换的日期时间时,total_seconds() 是错误的
- vba - 使用文本框内容宏重命名 Powerpoint 对象
- javascript - 混淆更新根目录并在链接中添加文本
- python - 如何在唯一列值上合并数据框?
- vue.js - Vue Router 的资源路径在重新加载时中断
- ruby-on-rails - 为什么 Rails 应该渲染 422 却渲染 200?
- c++ - C++ 模板类的内部类访问