一场噩梦试图在React App中比较两个日期是否匹配

debugcn 发表于 Dev

亚当·萨克菲尔德

如标题所述，我正在努力使该功能正常运行。我看过这里的类似文章以及许多参考MomentJS，他们建议不要在自己的网站上使用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} />
            }
           })
        }

Uzair Ashraf |

您缺少返回声明。虽然如果没有后备功能，它将创建一个带有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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。