时间戳

首页 > 解决方案 > 有条件地在列表中显示日期

javascript - 有条件地在列表中显示日期

问题描述

目前我正在研究小型 React 项目，我正在使用航班信息 API 提供的数据。到目前为止，一切都按计划进行。我可以在列表中显示所有数组项。现在我正在尝试实现一个在列表中的单独行上显示日期的功能。我只想为具有相同日期的一个或多个项目显示一次日期。

在我使用变量displayDate的条件下。基本上只是为了能够暂时打开/关闭日期并测试一些逻辑。我现在想弄清楚的是我需要什么逻辑才能将 if 语句评估为真或假。当前日期和数组中的下一个日期之间必须进行某种比较。

数组中的每个对象都有一个名为 scheduleDate 的属性，格式为“2020-07-06”。

有什么想法可以解决这个问题吗？

<Flights>
                {resolvedData &&
                  resolvedData.flights
                    .filter((item) => item.flightName === item.mainFlight)
                    .map((item, index) => {
                      if (displayDate) {
                        return (
                          <React.Fragment key={item.id}>
                            <Date date={item.scheduleDate} />
                            <Flight flight={item} />
                          </React.Fragment>
                        );
                      } else {
                        return <Flight key={item.id} flight={item} />;
                      }
                    })}
</Flights>

标签： javascriptreactjs

解决方案

检查 scheduleDate 是否与上一个不同

  const renderTable = () => {
    let currentDate = null;
    return data.map((item, index) => {
      if (item.scheduleDate !== currentDate) {
        currentDate = item.scheduleDate;
        return (
          <>
            <Date/>
            <Flight/>
          </>
        );
      } else {
        return <Flight/>;
      }
    });
  };

  <Flights>{renderTable()}</Flights>

推荐阅读