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
添加回答
舉報