做噩梦试图比较 React 应用程序中的两个日期是否匹配

Question

正如标题所说，我正在努力让这件事发挥作用。我在这里查看了类似的帖子和许多参考 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} />
            }
           })
        }

Answer 1

您缺少退货声明。 虽然如果你没有后备，它会创建一个包含 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>