如何简单地增加一个部件级的装货站(五)在每条线路变动中增加一个装载机,因为某些路线的变化可能不需要服务器的附带提供)。

在相关问答时间发生变化时,当有关问询时间发生变化时,当有关职位被id时,将国家定为假日,在这种情况下,员额数据得到更新。

据此:

pages/post/index.js:

import React from "react";
import Layout from "../../components/Layout";
import { useRouter } from  next/router ;

function Post({ post }) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  
  // loading new post
  useEffect(()=> {
   setIsLoading(true);
  }, [router.query?.id]);
  
  // new post loaded
  useEffect(()=> {
   setIsLoading(false)
  }, [post]);

  return (
    <>
    {isLoading ? (
      <h1>Loading...</h1>
     ) : (
      <Layout title={post.name}>
       <pre>{JSON.stringify(post, undefined, 2)}</pre>
      </Layout>
    )}
    </> 
  );
}

export async function getServerSideProps({ query }) {
  return fetch(
    `${process.env.API_URL}/api/post?id=${query.id}`
  )
    .then(result => result.json())
    .then(post => ({ props: { post } }));
}

export default Post;

在90条法典行(vs NProgress v.0.20)中,进步节有470条线,js + 70条线。

import { useEffect, useReducer, useRef } from  react ;

import { assert } from  ./assert ;
import { wait } from  ./wait ;
import { getRandomInt } from  ./getRandomNumber ;

let waitController: AbortController | undefined;

// https://gist.github.com/tkrotoff/db8a8106cc93ae797ea968d78ea28047
export function useProgressBar({
  trickleMaxWidth = 94,
  trickleIncrementMin = 1,
  trickleIncrementMax = 5,
  dropMinSpeed = 50,
  dropMaxSpeed = 150,
  transitionSpeed = 600
} = {}) {
  // https://stackoverflow.com/a/66436476
  const [, forceUpdate] = useReducer(x => x + 1, 0);

  // https://github.com/facebook/react/issues/14010#issuecomment-433788147
  const widthRef = useRef(0);

  function setWidth(value: number) {
    widthRef.current = value;
    forceUpdate();
  }

  async function trickle() {
    if (widthRef.current < trickleMaxWidth) {
      const inc =
        widthRef.current +
        getRandomInt(trickleIncrementMin, trickleIncrementMax); // ~3
      setWidth(inc);
      try {
        await wait(getRandomInt(dropMinSpeed, dropMaxSpeed) /* ~100 ms */, {
          signal: waitController!.signal
        });
        await trickle();
      } catch {
        // Current loop aborted: a new route has been started
      }
    }
  }

  async function start() {
    // Abort current loops if any: a new route has been started
    waitController?.abort();
    waitController = new AbortController();

    // Force the show the JSX
    setWidth(1);
    await wait(0);

    await trickle();
  }

  async function complete() {
    assert(
      waitController !== undefined,
       Make sure start() is called before calling complete() 
    );
    setWidth(100);
    try {
      await wait(transitionSpeed, { signal: waitController.signal });
      setWidth(0);
    } catch {
      // Current loop aborted: a new route has been started
    }
  }

  function reset() {
    // Abort current loops if any
    waitController?.abort();
    setWidth(0);
  }

  useEffect(() => {
    return () => {
      // Abort current loops if any
      waitController?.abort();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return {
    start,
    complete,
    reset,
    width: widthRef.current
  };
}

import { useRouter } from  next/router ;
import { useEffect } from  react ;

import { useProgressBar } from  ./useProgressBar ;

const transitionSpeed = 600;

// https://gist.github.com/tkrotoff/db8a8106cc93ae797ea968d78ea28047
export function RouterProgressBar(
  props?: Parameters<typeof useProgressBar>[0]
) {
  const { events } = useRouter();

  const { width, start, complete, reset } = useProgressBar({
    transitionSpeed,
    ...props
  });

  useEffect(() => {
    events.on( routeChangeStart , start);
    events.on( routeChangeComplete , complete);
    events.on( routeChangeError , reset); // Typical case: "Route Cancelled"

    return () => {
      events.off( routeChangeStart , start);
      events.off( routeChangeComplete , complete);
      events.off( routeChangeError , reset);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return width > 0 ? (
    // Use Bootstrap, Material UI, Tailwind CSS... to style the progress bar
    <div
      className="progress fixed-top bg-transparent rounded-0"
      style={{
        height: 3, // GitHub turbo-progress-bar height is 3px
        zIndex: 1091 // $zindex-toast + 1 => always visible
      }}
    >
      <div
        className="progress-bar"
        style={{
          width: `${width}%`,
          //transition:  none ,
          transition: `width ${width > 1 ? transitionSpeed : 0}ms ease`
        }}
      />
    </div>
  ) : null;
}

如何使用:

// pages/_app.tsx

import { AppProps } from  next/app ;
import Head from  next/head ;

import { RouterProgressBar } from  ./RouterProgressBar ;

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>My title</title>
        <meta name="description" content="My description" />
      </Head>

      <RouterProgressBar />

      <Component {...pageProps} />
    </>
  );
}

更具体地说,https://gist.github.com/tkrotoff/db8a8106cc93a797ea968d78ea 28047

**Here is how I did it in NextJs with Material UI and nprogress**

import  ../styles/globals.css ;
import { useEffect, useState } from  react ;
import Router from  next/router ;
import NProgress from  nprogress ;

import { useStyles } from  ../src/utils ;
import { CircularProgress } from  @material-ui/core ;

NProgress.configure({ showSpinner: false });

function MyApp({
  Component,
  pageProps
 
}) {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const jssStyles = document.querySelector( #jss-server-side );
    if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);

    const start = () => {
      console.log( start );
      NProgress.start();
      setLoading(true);
    };
    const end = () => {
      console.log( findished );
      NProgress.done();
      setLoading(false);
    };

    Router.events.on( routeChangeStart , start);
    Router.events.on( routeChangeComplete , end);
    Router.events.on( routeChangeError , end);
    return () => {
      Router.events.off( routeChangeStart , start);
      Router.events.off( routeChangeComplete , end);
      Router.events.off( routeChangeError , end);
    };
  }, []);
  return (
    <>
       {loading ? (
          <div className={classes.centered}>
            <CircularProgress size={25} color= primary  />
          </div>
        ) : (
        <Component {...pageProps} />
       )}
    </>
  );
}

export default MyApp;

Result:

为补充先前的答复并显示完整的编码,您可加上“密码><>>>>>> 截止日期/代码>的延迟。 在该事件中确定状态时,避开在快速装货路线上(或者固定航线或随时可以走的服务器线路)装货的浮标。

import Router from  next/router ;
import { useEffect, useRef, useState } from  react ;

const usePageLoad = (delay = 200) => {
  const timeoutRef = useRef();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const start = () => {
      timeoutRef.current = window.setTimeout(() => {
        setLoading(true);
      }, delay);
    };
    const end = () => {
      window.clearTimeout(timeoutRef.current);
      setLoading(false);
    };
    Router.events.on( routeChangeStart , start);
    Router.events.on( routeChangeComplete , end);
    Router.events.on( routeChangeError , end);
    return () => {
      Router.events.off( routeChangeStart , start);
      Router.events.off( routeChangeComplete , end);
      Router.events.off( routeChangeError , end);
    };
  }, [delay]);

  return loading;
};

export default usePageLoad;

然后,在<代码>-应用上使用这个标题,并视需要调整延迟适用。

import PageLoader from  ../components/PageLoader ;
import usePageLoad from  ../components/use-page-load ;

const App = ({ Component, pageProps }) => {
  const loading = usePageLoad();

  return (
    {
       loading
          ? <PageLoader />
          : <Component {...pageProps} />
    }
  );
};

我使用了“@marko424”的习俗 h。

但是,我只需要在某些网页上显示装货量,而不用“Loading. ......”每个页数的ms。

因此,我创造了一个超支的背景,并总结了以下部分:

<OverlayProvider>
    <Component {...pageProps} />
</OverlayProvider>

Inside OverlayProvider:

function OverlayProvider({ children }: OverlayProps) {
    const { isPageLoading } = usePageLoading();
    const overlayData = {
        isPageLoading,
    };
    return (
        <OverlayContext.Provider value={overlayData}>{children}</OverlayContext.Provider>
    );
}
export { OverlayProvider };
export default OverlayContext;

现在,从我需要超负荷的网页上,我可以使用:

const { isPageLoading } = useContext(OverlayContext);

然后,有条件地提交联合材料。