REACT JS重置整数计数器

Question

我有一个函数，它使用fetch-api调用从服务中获取数据，并使用async和wait等待响应。如果响应不为null，它将加载一个react组件，并将提取的数据传递给该组件，它将使用react状态来管理数据内容。由于等待，我不得不引入一个整数计数器来帮助我管理react页面。因此，整数计数器被初始化为0，并且只有在fetch调用的响应不为null时才会递增。所以只要计数器为0，我就一直显示进度条。一旦数据状态发生变化，整数计数器就会递增，页面就会加载一个带有提取数据的新react组件。

function CheckDeliveries(){
const [deliveries, setDeliveries] = useState(null);
const urlAPpend = "delivery/findByCustomerId/";
let userid = JSON.parse(localStorage.getItem("User"))["userId"];
const httpMethod = 'GET';
let token = localStorage.getItem("Token");

console.error('RELOAD >>>>>>', reload);
if(reload < 1){
makeApiAuthCallsWithVariable(userid,urlAPpend,httpMethod,token).then(
data  => {
if (data !== null) {
//console.log("Api response: Data "+JSON.stringify(data));
setDeliveries(data);
reload++
}else{
console.error('Response not ok', data);
}
}
)
}
if(reload >= 1 && deliveries !== null){
reload = 0;
console.error('RELOAD AllDeliveryDiv >>>>>>', reload);
return (<AllDeliveryDiv obj = {deliveries} />);
}else if(reload >= 1 && deliveries === null){
reload = 0;
console.error('RELOAD MakeDeliveryDiv >>>>>>', reload);
return (<MakeDeliveryDiv />);
}else if(reload === 0){
return ( <ProgressBar striped variant="primary" now={value}/>);
}
}

我的问题

1. 我曾尝试使用布尔状态而不是整数计数器，但每当我更新布尔状态时，页面就会进入无限循环。有没有一种方法可以在不经历无限循环的情况下实现这个布尔状态
2. 获取数据后，将计数器重置为0。我记录重置前和重置后的值，分别得到1和0。但是，当我在不重新加载整个页面的情况下再次调用此函数时，计数器值仍然为1，即使在我之前重置了它。我该如何解决此问题
3. 有什么更好的方法可以实现这一点，请分享

Answer 1

很难真正说出reload的用途，所以我省略了整个MakeDeliveryDiv的内容，但当组件首次使用useEffect副作用挂钩安装时，这将从端点加载数据：

function CheckDeliveries() {
const [deliveries, setDeliveries] = useState(null);
const [loaded, setLoaded] = useState(false);
React.useEffect(() => {
const userid = JSON.parse(localStorage.getItem("User"))["userId"];
const token = localStorage.getItem("Token");
makeApiAuthCallsWithVariable(
userid,
"delivery/findByCustomerId/",
"GET",
token,
).then((data) => {
setDeliveries(data);
setLoaded(true);
});
}, []);
if (!loaded) {
return <ProgressBar striped variant="primary" now={value} />;
}
if (deliveries === null) {
return <>Data not OK.</>;
}
return <AllDeliveryDiv obj={deliveries} />;
}