reactjs - React - 绑定数据时显示消息
问题描述
我有一个用户列表,如果绑定数据延迟,我想在其中显示“正在加载用户..”,如果结果为空,则显示“未找到数据”。我怎样才能做到这一点。
包括用户组件,我将在其中显示用户详细信息
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>
解决方案
在您的 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() 某处定义了过滤列表 :)
推荐阅读
- javascript - 遍历嵌套对象并将子键作为单独的数组返回
- apache-spark - Pyspark 中的案例陈述问题
- python - 为不包括 0 的对生成生成器
- javascript - 无法在 javascript 中强制刷新画布
- function - 使用“request.security”函数绘制的 MultiTimeFrame 问题
- api - Rapid Api- Skyscanner Flight Search 出现 403(禁止)错误
- python - Python Websocket 模块继续启动不会被杀死导致内存问题的进程
- angular - 在 firestore 中删除数组的成员时,我遵循的 observable 将使用结果数组中的未定义值进行更新
- r - R - 使用带有 Purrr 的 Dplyr mutate 进行字符串操作
- javascript - 将响应从远程服务器传输到内容脚本(Chrome 扩展)