javascript - 如何比较/给出数组映射-react js的条件

Question

如何在我的编码中比较或给出数组映射的条件。

这是我的状态:

  export class RightCollBar extends Component {
      constructor(props) {
        super(props);
        this.state = {
          display: false,
          data: [],
          tomodata:[],
          poyaArray:[],


        };
      }

这是我的生命周期方法:

componentWillMount() {
    this.getAbsentDet();
    this.getAbsentDetTomo() ;
    this.getCompanyHolydayLeave();
  }

此代码用于获取今天缺勤(此处仅员工姓名，员工姓名，休假日期...)来自后端环回的员工数据详细信息:

getAbsentDet() {
    this.props.actions.getAbsentDetails().then(() => {
      if (!this.props.common.getAbsentDetailsPending) {
        this.setState({ data: this.props.common.absDetails.emp  });
           {console.log( 'my data array:',this.state.data )}
      }
    });
  }

这是从后端环回获取公司的圣日详细信息(这里只有圣日日期和描述)；

  getCompanyHolydayLeave() {
  this.props.actions.getCompanyLeaveDetails().then(() => {
    if (!this.props.common.getCompanyLeaveDetailsPending) {

      this.setState({ poyaArray: this.props.common.companyLeave });  

    }

  });

}

此编码仅显示今天谁离开(今天列表)。我需要如何给出条件，如果今天是圣日或者今天是星期六或星期日，则只显示消息“今天是圣日”或“今天是星期六” ,sunday' :这是我的数组数据(今天休假列表) map 代码。

      {this.state.data.length !== 0?<ul style={{ marginTop: 30 }}>

                    <h1 style={{fontSize: 16, }}> Today List</h1>  
                        {this.state.data.map(data =>
                            (  
                           <li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
                                <div> 
                                <span>
                                  <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} /></Badge>
                                </span>
                                <span style={{ marginLeft: 10, color: '#036cd2' }}>
                                  {data.f_name} {data.l_name}
                                </span>

                              </div>
                              </li>)

                          )} 
  <div className="check" id="rightMenu" ref="check" style={{ padding: 5 }}>         
   </div>
 </ul> : <div style={{ marginTop: 30, marginLeft: 10, fontSize: 20, borderStyle: 'solid', borderColor: 'black', textAlign: 'center', color: 'lightGray' }}>No one is absent today </div>}

Answer 1

// isHoliday function
const isHoliday = () => {
  const today = new Date()
  const dayOfWeek = today.getDay()
  return (dayOfWeek == 6 || dayOfWeek == 0) // 0 for Sunday, 6 for Saturday
}

...
{this.state.data.map(data => (
  {isHoliday() &&   
   (<li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
      <div> 
        <span>
          <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} />
          </Badge>
        </span>
        <span style={{ marginLeft: 10, color: '#036cd2' }}>
           {data.f_name} {data.l_name}
        </span>
      </div>
    </li>)}
)}