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

Question

我有一个带有日期的对象的数组。我有开始和结束日期。我希望它附加在我的日历组件上。但是我不确定如何同时添加它们（开始和结束日期）。我只能过滤开始日期。

这是我的表格

提交表单后这是我的数据

{
 category: "leave"
 colorCode: "#6f1e51"
 email: "[email protected]"
 endDate: "2019-11-05"
 endTime: "10:48 AM"
 startDate: "2019-11-01"
 startTime: "10:49 AM"
 type: "Vacation Leave"
} {
 category: "leave"
 colorCode: "#f79f1f"
 email: "[email protected]"
 endDate: "2019-11-10"
 endTime: "10:50 AM"
 startDate: "2019-11-05"
 startTime: "10:49 AM"
 type: "Sample Leave"
} {
 category: "leave"
 colorCode: "#f79f1f"
 email: "[email protected]"
 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
 );
};

并使用此功能在日历的道具中将其附加在日历中

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

老实说，我认为您真的很亲密！我认为您只需要更新筛选器函数中的逻辑即可返回与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
  );
};