3 回答
TA贡献1804条经验 获得超2个赞
我确实有旧反应的经验
所以我可以建议你这些chanfes
useEffect(() => {
setLoading(true); // here
fetchDefibs();
console.log(loading)
}, [])
然后
const fetchDefibs = () => {
dataProvider.getList('defibrillateurs', {
filters: {},
sort: {field: 'id', order: 'ASC'},
pagination: { page: 1, perPage: 10 }
}).then((response) => {
setLoading(false); // here
setDefibs(response.defibs)
setLoading(false);
}).catch( e => setLoading(false);)
}
然后
return(
{!loading ? <Loading />
:
<div className={classes.flex}>
<div className={classes.leftCol}>
<div className={classes.flexColumn}>
<Card>
<CardHeader title="Welcome to the administration" />
<CardContent>Lorem ipsum sic dolor amet...</CardContent>
</Card>
......
}
当您使用{ defibs &&它时,它将始终为真,因为您已初始化它,如果它是或并且使用 不是最好的方法,那么[]它只会是假的,就像数据库返回长度为 0 的数组然后对您的应用程序将显示加载undefinednulldefibs && defibs.length = 0[]
TA贡献1859条经验 获得超6个赞
对于功能组件我认为最好的是useeffect
import { useEffect, useState } from 'react';
function FetchEmployeesByQuery({ query }) {
const [employees, setEmployees] = useState([]);
useEffect(() => {
async function fetchEmployees() {
const response = await fetch(
`/employees?q=${encodeURIComponent(query)}`
);
const fetchedEmployees = await response.json(response);
setEmployees(fetchedEmployees);
}
fetchEmployees();
}, [query]);
return (
<div>
{employees.map(name => <div>{name}</div>)}
</div>
);
}
TA贡献1834条经验 获得超8个赞
我认为问题是您使用了错误的表达方式
!defibs
false
无论defibs
是空数组还是加载的数组,总是返回。
您应该将表达式更改defibs.length <= 0
为明确要求组件在为空<Loading />
时呈现defibs
添加回答
举报