javascript - 有一个噩梦试图比较 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>

我已经尝试过但没有成功。我现在正在尝试 vanilla 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.

我也试过 == 和 === 运营商但纳达。
请发送帮助，我失去了理智。
编辑
我设法让它工作，我想在@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

您缺少 return 语句。
尽管如果您没有回退，它将创建一个包含 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>