Reactjs 返回一组<；td>；细胞

我正在映射我的考勤对象数组，并尝试在存在考勤记录时返回

单元格，在不存在考勤记录时返回空的

单元格。如果存在考勤记录，我当前只能返回

单元格。如何返回空的

单元格

路径：

file.jsx

render() {
  return (
    <div className="mt-3">
      <Table hover>
        <thead>
          <tr>
            <th className="border-top-0 pt-0">Absent</th>
            <th className="border-top-0 pt-0">Present</th>
          </tr>
        </thead>
        <tbody>
          {this.props.studentUserProfiles.map(studentUserProfile => (
            <tr key={studentUserProfile._id}>
              {this.props.attendances.map((attendance) => {
                if (attendance.studentUserProfileId === studentUserProfile._id) {
                  return (
                    <React.Fragment key={attendance._id}>
                      <td>{attendance.absentRollCallTeacherUserId ? 'True' : null}</td>
                      <td>{studentUserProfile.presentRollCallTeacherUserId ? 'True' : null}</td>
                    </React.Fragment>
                  );
                }
              })}
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

render（）{
返回(
缺席的
目前
{this.props.studentUserProfiles.map（studentUserProfile=>(
{this.props.attentions.map（（出席）=>{
if（Attention.studentUserProfile id==studentUserProfile.\u id）{
返回(
{attention.absentRollCallTeacherUserId？'True'：null}
{studentUserProfile.PreControlCallTeacherUserId？'True'：null}
);
}
})}
))}
);
}

在循环开始之前，只需检查

this.props.attention的长度，然后使用JSX返回所需的标记

render() {
    return (
      <div className="mt-3">
        <Table hover>
          <thead>
            <tr>
              <th className="border-top-0 pt-0">Absent</th>
              <th className="border-top-0 pt-0">Present</th>
            </tr>
          </thead>
          <tbody>
            {this.props.studentUserProfiles.map(studentUserProfile => (
              <tr key={studentUserProfile._id}>
              { this.props.attendance.length > 0 &&
                    <React.Fragment>
                     {this.props.attendances.map((attendance) => {
                         return (
                            <React.Fragment key={attendance._id}>
                                {attendance.studentUserProfileId == studentUserProfile._id &&
                                    <td>{attendance.absentRollCallTeacherUserId ? 'True' : null}</td>
                                    <td>{studentUserProfile.presentRollCallTeacherUserId ? 'True' : null}</td>
                                }
                                {attendance.studentUserProfileId != studentUserProfile._id &&
                                    <td></td>
                                    <td></td>
                                }
                            </React.Fragment>
                            );
                    })}
                </React.Fragment>
              }

              { this.props.attendance.length == 0 &&
                <React.Fragment >
                <td></td>
                <td></td>
               </React.Fragment>
              }

              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    );
  }

render（）{
返回(
缺席的
目前
{this.props.studentUserProfiles.map（studentUserProfile=>(
{this.props.attention.length>0&&
{this.props.attentions.map（（出席）=>{
返回(
{Attention.studentUserProfileId==studentUserProfile.\u id&&
{attention.absentRollCallTeacherUserId？'True'：null}
{studentUserProfile.PreControlCallTeacherUserId？'True'：null}
}
{Attention.studentUserProfileId！=studentUserProfile.\u id&&
}
);
})}
}
{this.props.attention.length==0&&
}
))}
);
}
也许这会对你有所帮助


{this.props.studentUserProfiles.map（studentUserProfile=>(
{this.props.attentings.find（attention=>studentUserProfile.\u id===attention.id）？this.props.attentings.map（（attention）=>{
if（Attention.studentUserProfile id==studentUserProfile.\u id）{
返回(
{attention.absentRollCallTeacherUserId？'True'：null}
{studentUserProfile.PreControlCallTeacherUserId？'True'：null}
);
}
}) : (
)}
))}
当this.props.attentations为空时？如果该特定配置文件没有可循环使用的考勤记录，则我需要返回
以正确呈现表格。如果没有考勤记录（this.props.attentation.length==0）您将如何获得出席人数。\u id？好的！刚刚看到更新的评论抱歉，这不正确。我想我误导了你。如果我有30个用户配置文件和1个考勤记录，则
If（attention.studentUserProfileId===学生用户配置文件。\u id）
仅返回真1次。我需要返回另外29次
。