Question

I have a list users, those details want to show in table format. Want to check if map has value, if not show the message 'no data found'. how can I achieve that.?

 {filteredList && filteredList
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(row =>
                  ( row===null ? (
                  <TableRow key={row.id}>
                    <TableCell className={classes.tableCell}>{items++}</TableCell>

                    <TableCell className={classes.tableCell}>
                      {row.sp_Name}
                    </TableCell>
                    <TableCell className={classes.tableCell}>{row.sp_Phone}</TableCell>
                    <TableCell className={classes.tableCell}>{row.sp_Role}</TableCell>
                    <TableCell className={classes.tableCell}>{row.sp_Service}</TableCell>
                    <TableCell className={classes.tableCell}>{row.sp_Location}</TableCell>


                    <TableCell className={classes.tableCell}>
                      <Link to={'/admin/profile/' + row.id} key={row.id} style={{ textDecoration: "none" }} >
                        <Chip
                          icon={<FaceIcon />}
                          label="View Profile/Action"
                          color="primary"
                          className={classes.chip}
                          variant="outlined"
                          onClcik={this.handleAction}
                        />
                      </Link>
                    </TableCell>
                    <TableCell className={classes.tableCell}>
                      <Tooltip title="Delete">
                        <DeleteIcon color="danger" onClick={() => this.handleClickDialogOpen(row.id)} className={classes.icon} />
                        {/* <DeleteIcon onClick={() => deleteSP(row.id)} className={classes.icon} /> */}
                      </Tooltip>
                    </TableCell>

                  </TableRow>
                ) : "no data"
                  )
                )}

Answer 1

您可以检查数据是否首先存在，如果存在，则呈现表和行。如果没有数据然后只需渲染所需的“未找到数据”文本

getData = () => {
  const filteredList = this.state.list // your logic to get data

  // Perform your logic to filter the data
  return filteredList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
}

render() {
   const filteredList = this.getData()
   return (
       filteredList.length > 0 ?
       <table>
           {data.map( /* Make your <tr> */ )}
       </table> :
       "no data found"
   )
}

Answer 2

尝试返回从三元运算符获得的值。由于您没有从map函数返回值，因此会得到一个充满未定义数组，而不是一个供React渲染的组件数组。

{filteredList && filteredList
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map(row =>
              return (row === null ?
                  *Your List components go here*
                  : 'no data')
 }

How to check map has values or not react

2 个答案: