过滤数组中的两个对象并附加到组件中

Question

我有一个数组，数组中的对象都有日期。我有开始日期和结束日期。我想把它附加到我的日历组件上。但我不确定如何将它们(开始日期和结束日期)都附加到后面。我只能过滤开始日期。

这是我的表格

​

以下是我提交表单后的数据

{
 category: "leave"
 colorCode: "#6f1e51"
 email: "sfe.bruce.logan@gmail.com"
 endDate: "2019-11-05"
 endTime: "10:48 AM"
 startDate: "2019-11-01"
 startTime: "10:49 AM"
 type: "Vacation Leave"
} {
 category: "leave"
 colorCode: "#f79f1f"
 email: "sfe.bruce.logan@gmail.com"
 endDate: "2019-11-10"
 endTime: "10:50 AM"
 startDate: "2019-11-05"
 startTime: "10:49 AM"
 type: "Sample Leave"
} {
 category: "leave"
 colorCode: "#f79f1f"
 email: "sfe.bruce.logan@gmail.com"
 endDate: "2019-11-20"
 endTime: "10:51 AM"
 startDate: "2019-11-10"
 startTime: "10:50 AM"
 type: "Sample Leave"
}

这是我过滤startDate并将其与日历中的日期数组进行比较的代码

const getEmployeeLeaves = value => {
let employeeLeaves = [...isEmployeeLeave];

 const calendarDates = value.toString();
 const formatCalendarDates = moment(calendarDates).format('YYYY-MM-DD');

 const getDates = employeeLeaves.filter(
  item => item.startDate === formatCalendarDates
 );
};

并使用此函数将其附加到日历中，在calendar的属性中调用它

const dateCellRender = value => {
let employeeLeaves = getEmployeeLeaves(value);

if (employeeLeaves && employeeLeaves.length) {
 return (
  <ul className="events">
   {employeeLeaves.map((item, i) => (
     <li key={i}>
      <p>
       {item.email}
      </p>
    </li>
   ))}
   </ul>
  );
} else {
  return <ul className="leaves"></ul>;
 }
};

这就是组件。我使用的是AntDesign日历组件

<Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={changeCalendarMode}
  onSelect={showLeaveListModal}
/>

Answer 1

老实说，我觉得你们已经很接近了！我认为您只需要更新filter函数中的逻辑，以返回与startDate或endDate匹配的employeeLeaves。

const getEmployeeLeaves = value => {
  let employeeLeaves = [...isEmployeeLeave];

  const calendarDates = value.toString();
  const formatCalendarDates = moment(calendarDates).format('YYYY-MM-DD');

  return employeeLeaves.filter(
    item => item.startDate === formatCalendarDates || item.endDate === formatCalendarDates
  );
};