显示读取数据时正在加载旋转器

Question

如何在数据加载时显示加载旋转器

const [user, loading, error] = useAuthState(auth);
const navigate = useNavigate()
const [bikes] = useBikes()
if (loading) {
return  <Loading></Loading>
}

fetch(`http://localhost:5000/bike/${id}`, {
method: 'DELETE'
})
.then(res => res.json())
.then(data => {
console.log(data)
alert('One Item Deleted')
});

Answer 1

如果你有一个id为spinner的旋转器，这里有一个简单的例子告诉你如何做到这一点。

function delitem(){
document.getElementByID("spinner").style.display = "block"
fetch(`http://localhost:5000/bike/${id}`, {
method: 'DELETE'
})
.then(res => res.json())
.then(data => {
console.log(data)
alert('One Item Deleted')
document.getElementByID("spinner").style.display = "none"
});
}

Answer 2

把你的取回API放在useEffect中，这样你就可以很容易地实现你的旋转器功能

const [isLoading,setIsLoading]=useState(false);

useEffect(()=>{
setIsLoading(true);
fetch("some-url").then(res=>res.json())
.then(data=>{
setIsLoading(false)
console.log(data);
},[])
if(isLoading){
return <LoadingSpinner/>
}
return <div>..your data </div>