REACT JS 重置整数计数器

Question

我有这个函数，它使用 fetch api 调用从服务获取数据，并使用 async 和 await 等待响应。如果响应不为空，它会加载一个反应组件并将获取的数据传递给该组件，它使用反应状态来管理数据内容。由于等待，我不得不引入一个整数计数器来帮助我管理反应页面。因此，整数计数器被初始化为 0，并且仅在 fetch 调用的响应不为空时才递增。因此，只要计数器为 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}/>);
    }
}

我的问题

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

Answer 1

很难真正说出 reload 的用途，所以这就是为什么我将整个 MakeDeliveryDiv 的东西都放在外面的原因，但这会在组件加载时从端点加载数据首先使用 useEffect side effect hook:

安装

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} />;
}

REACT JS 重置整数计数器

REACT JS reset integer counter

javascript

reactjs

fetch-api

react-state-management