Question

我有一个用户列表，如果绑定数据出现延迟，我想在其中显示“正在加载用户..”，如果结果为空，则显示“未找到数据”。我该怎么办。

包括用户组件，我将在其中显示用户详细信息

render() {
    const { mapSP, classes } = this.props;
    const { search, statusFilter, page, rowsPerPage } = this.state;

    let filteredList = mapSP && mapSP.filter(usr => {
      const normalizedSearchString = search.toLowerCase();
      return ((usr.sp_Name.toLowerCase().includes(normalizedSearchString)
        || usr.sp_Phone.includes(normalizedSearchString)
        || usr.sp_Role.toLowerCase().includes(normalizedSearchString))
        && usr.sp_Status == statusFilter && usr.sp_ActiveFlag == "1")
    });
    //console.log(filteredList)
    let items = 1;
    return (
      <div>

         <div className={classes.tableResponsive}>
          <Table className={classes.table}>
            <TableHead className={classes["warning" + "TableHeader"]}>
              <TableRow >
                <TableCell className={classes.tableCell + " " + classes.tableHeadCell}>#</TableCell>
                <TableCell className={classes.tableCell + " " + classes.tableHeadCell}>Name</TableCell>
                <TableCell className={classes.tableCell + " " + classes.tableHeadCell}>Phone</TableCell>
                <TableCell className={classes.tableCell + " " + classes.tableHeadCell}>Role</TableCell>
                <TableCell className={classes.tableCell + " " + classes.tableHeadCell}>Service</TableCell>
                <TableCell className={classes.tableCell + " " + classes.tableHeadCell}>Location</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredList && filteredList
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(row => (
                  //  { mapSP && mapSP.map(row => (
                  <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>                   

                  </TableRow>
                ))}
 </TableBody>
          </Table>

Answer 1

在render（）函数中，您可以执行以下操作：

render(){
    if(!filteredList){
      return(
         <div>Loading...</div>
      )
    } else {
       return(
           {filteredList
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(row => (
                  //  { mapSP && mapSP.map(row => (
                  <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>                   
                  </TableRow>
           ))}       
       )

    }

}

只需确保您在render（）中的某个位置定义了filteredList：）

Answer 2

    const rows = filteredList
        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
        .map(row => (
            <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>
            </TableRow>
        ));

    return (!filteredList ? <Loader/> : {rows})

反应-绑定数据时显示消息

2 个答案: