Javascript 如何在React中映射一组对象，然后基于以前的值有条件地渲染组件？

我有一个要创建的计划视图。但是，我希望只有当日期框具有唯一的日期（然后是下面列出的时间列表）时，它才会出现

我希望它看起来像

但是，当前，日期框是随着每次迭代呈现的。 我无法根据当前和以前的日期有条件地呈现日期框。我一直在尝试映射数据，访问先前迭代的日期，并比较它们是否相等，但它没有按照我希望的那样工作。我将在下面展示我的尝试。当我试图访问上一个日期时，它会抛出一个错误

有没有关于如何实现这一目标的建议

    import "./styles.css";
import React from "react";
import styled from "styled-components";
import { format, isSameDay } from "date-fns";

const Student = styled.p`
  font-size: 16px;
  font-weight: bold;
  margin: 0px 20px 0px 20px;
`;

const NameContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
`;

const Teacher = styled.p`
  font-size: 16px;
  margin: 0px;
`;

const BottomContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 95px;
`;

const SubjectLabel = styled.p`
  font-size: 12px;
  font-weight: bold;
  margin-right: 5px;
`;

const Subject = styled.p`
  font-size: 14px;
`;

const Difficulty = styled.p`
  font-size: 14px;
  font-weight: bold;
  color: red;
  margin-left: 10px;
`;

const Row = styled.div`
  text-decoration: none;
  cursor: pointer;
  :hover {
    background: grey;
  }
`;

const DateBox = styled.div`
  display: flex;
  width: 70px;
  height: 25px;
  background-color: pink;
  justify-content: center;
`;

const TimeBox = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 70px;
  height: 25px;
  border-radius: 15px;
  border: 1px solid black;
`;

const Time = styled.p`
  font-size: 10px;
  font-weight: 600;
`;

export const schedules = [
  {
    id: "1",
    student: "Faye",
    subject: "Math",
    difficulty: "Extreme",
    dateSent: new Date("December 17, 2020"),
    to: "Mr Skip"
  },
  {
    id: "2",
    student: "Jen",
    subject: "English",
    difficulty: "Easy",
    dateSent: new Date("December 17, 2020"),
    to: "Mr Skip"
  },
  {
    id: "3",
    student: "Martin",
    subject: "Math",
    difficulty: "Easy",
    dateSent: new Date("December 13, 2020"),
    to: "Mr Skip"
  },
  {
    id: "4",
    student: "Steve",
    subject: "Geography",
    difficulty: "Hard",
    dateSent: new Date("December 13, 2020"),
    to: "Mr Skip"
  }
];

export default function App() {
  return (
    <div>
      {schedules.length > 0 &&
        schedules.map((schedule, i, arr) => {
          const previousArray = arr[i - 1];
          // console.log("this is previous array", previousArray);
          // console.log("this is previous date", previousArray.dateSent); //this returns undefined
          return (
            <Row key={schedule.id}>
                {schedule.dateSent[i-1] !== schedule.dateSent) ? 
                (
                <DateBox>{format(schedule.dateSent, 'MMM dd')}</DateBox>
                ) : (
                null
                )}
              <NameContainer>
                <TimeBox>
                  <Time>{format(schedule.dateSent, "h:mm a")}</Time>
                </TimeBox>
                <Student>{schedule.student}</Student>
                <Teacher> For: {schedule.to}</Teacher>
              </NameContainer>
              <BottomContainer>
                <SubjectLabel>Subject</SubjectLabel>
                <Subject>{schedule.subject}</Subject>
                <Difficulty>{schedule.difficulty}</Difficulty>
              </BottomContainer>
            </Row>
          );
        })}
    </div>
  );
}

导入“/styles.css”； 从“React”导入React； 从“样式化组件”导入样式化； 从“日期fns”导入{format，isSameDay}； const Student=styled.p` 字体大小：16px； 字体大小：粗体； 保证金：0px 20px 0px 20px； `; const NameContainer=styled.div` 显示器：flex； 弯曲方向：行； 对齐项目：居中； 边缘顶部：10px； `; const Teacher=styled.p` 字体大小：16px； 边际：0px； `; const BottomContainer=styled.div` 显示器：flex； 弯曲方向：行； 对齐项目：居中； 左侧填充：95px； `; const SubjectLabel=styled.p` 字体大小：12px； 字体大小：粗体； 右边距：5px； `; const Subject=styled.p` 字体大小：14px； `; 常量难度=styled.p` 字体大小：14px； 字体大小：粗体； 颜色：红色； 左边距：10px； `; 常量行=styled.div` 文字装饰：无； 光标：指针； ：悬停{ 背景：灰色； } `; const DateBox=styled.div` 显示器：flex； 宽度：70px； 高度：25px； 背景颜色：粉红色； 证明内容：中心； `; const TimeBox=styled.div` 显示器：flex； 弯曲方向：行； 证明内容：中心； 宽度：70px； 高度：25px； 边界半径：15px； 边框：1px纯黑； `; const Time=styled.p` 字体大小：10px； 字号：600； `; 导出常量计划=[ { id:“1”， 学生：“费伊”， 主题：“数学”， 难度：“极限”， 发送日期：新日期（“2020年12月17日”）， 致：“斯基普先生” }, { id:“2”， 学生：“珍”， 主题：“英语”， 难度：“轻松”， 发送日期：新日期（“2020年12月17日”）， 致：“斯基普先生” }, { id:“3”， 学生：“马丁”， 主题：“数学”， 难度：“轻松”， 发送日期：新日期（“2020年12月13日”）， 致：“斯基普先生” }, { id:“4”， 学生：“史蒂夫”， 主题：“地理”， 难度：“难”， 发送日期：新日期（“2020年12月13日”）， 致：“斯基普先生” } ]; 导出默认函数App（）{ 返回( {schedules.length>0&& 时间表.map（（时间表，i，arr）=>{ const-previousArray=arr[i-1]； //log（“这是前一个数组”，前一个数组）； //console.log（“这是以前的日期”，previousArray.dateSent）；//返回未定义的 返回( {schedule.dateSent[i-1]！==schedule.dateSent）？ ( {格式（schedule.dateSent，'MMM dd'）} ) : ( 无效的 )} {格式（schedule.dateSent，“h:mm a”）} {schedule.student} For:{schedule.to} 主题 {附表.主题} {时间表.难度} ); })} ); }

---

这也是我的建议

我在这里添加了一个检查，以检查我是否>0和日期！=上一个日期，然后显示日期框，否则只需添加行

{schedules.length > 0 &&
    schedules.map((schedule, i, arr) => {
      const previousDate = arr[i - 1];
        return (
          <Row key={schedule.id}>
            { i==0 || (previousDate &&
          previousDate.dateSent.getDate() !== schedule.dateSent.getDate()) ?
                <DateBox>{format(schedule.dateSent, "MMM dd")}</DateBox> :
                 <></>
            }
            

            <NameContainer>
              <TimeBox>
                <Time>{format(schedule.dateSent, "h:mm a")}</Time>
              </TimeBox>
              <Student>{schedule.student}</Student>
              <Teacher> For: {schedule.to}</Teacher>
            </NameContainer>
            <BottomContainer>
              <SubjectLabel>Subject</SubjectLabel>
              <Subject>{schedule.subject}</Subject>
              <Difficulty>{schedule.difficulty}</Difficulty>
            </BottomContainer>
          </Row>
        );
    })}

{schedules.length>0&&
时间表.map（（时间表，i，arr）=>{
const previousDate=arr[i-1]；
返回(
{i==0 | |（以前的日期）&&
previousDate.dateSent.getDate（）！==schedule.dateSent.getDate（））？
{格式（schedule.dateSent，“MMM dd”）}：
}
{格式（schedule.dateSent，“h:mm a”）}
{schedule.student}
For:{schedule.to}
主题
{附表.主题}
{时间表.难度}
);
})}

正如所料

---

这里是

访问上一个日期的问题是，当i=0（对于第一个元素）时，您的previousArray=arr[-1]，这是未定义的，并引发错误。其余元素可以成功访问previousDate。哦，我明白了。我没有想到这一点。谢谢你的解释！