JS:如何在地图后过滤

时间:2018-10-14 13:32:33

标签: javascript reactjs typescript

我不想在map之后显示相同格式的日期时间。你们知道在这里的结果视图中有什么想法可以摆脱相同的YYYY- MM-DD ddd吗?

<Body>
  <Title>Choose Datetimes</Title>
  {eventType.availableDatetimes.map(d => (
    <styles.ListItem key={String(d)} onClick={() => onClick(d)}>
      <TouchRipple>
        <styles.StyledCard selected={Number(d) === Number(selectedDate)}>
          {d.format('YYYY-MM-DD ddd')}
        </styles.StyledCard>
      </TouchRipple>
    </styles.ListItem>
  ))}
</Body>

我想在这里加入相同的Datetime。 我想要改变 来自:

2018-10-14 sun
2018-10-14 sun
2018-10-14 sun
2018-10-14 sun
2018-10-15 mon
2018-10-15 mon
2018-10-15 mon

收件人:

2018-10-14 sun
2018-10-15 mon

1 个答案:

答案 0 :(得分:1)

Assuming the content Date would have different time but your logic for uniqueness is just the Date in described format,

const filterDateByUniqueDate = (dates) =>{
const resultSet = {};
return dates.filter(d =>{
   let dFormat = d.format('YYYY-MM-DD ddd');//ddd is not needed
   if(!resultSet[dFormat]){
      resultSet[dFormat] = d;
      return true;
   }
   return false;
});

}


//assuming react code but should be ok with any component based
....


render(){

....
const dateOptions = this.filterDateByUniqueDate(eventType.availableDatetimes); //us
<Body>
  <Title>Choose Datetimes</Title>
  {dateOptions.map(d => (
    <styles.ListItem key={d.toString()} onClick={() => onClick(d)}>
      <TouchRipple>
        <styles.StyledCard selected={Number(d) === Number(selectedDate)}>
          {d.format('YYYY-MM-DD ddd')}
        </styles.StyledCard>
      </TouchRipple>
    </styles.ListItem>
  ))}
</Body>