Question

我有一个页面需要刷新，但只在加载后刷新一次。如果我将 window.location.reload 放入 useeffect()，那么它会无限次刷新。如何让它在一次后停止重新加载页面？我尝试了布尔值和其他东西，但没有任何效果。它不断刷新无限次。链接到页面的路径是市场。

app.tsx

   import React from "react";
    import Market from "containers/Market";
    import Coins from "containers/Coins";
    import PoweredBy from "components/PoweredBy";
    import MarketProvider from "store/MarketProvider";
    import Exchanges from "components/Exchanges";
    import Exchange from "components/Exchange";
    import { BrowserRouter as Router, Route, Redirect, Switch, Link, LinkProps } from 'react-router-dom';
    import AppBar from '@material-ui/core/AppBar';
    import Tabs from '@material-ui/core/Tabs';
    
    import { default as Tab, TabProps } from '@material-ui/core/Tab';
    import HomeIcon from '@material-ui/icons/Home';
    import CodeIcon from '@material-ui/icons/Code';
    import TimelineIcon from '@material-ui/icons/Timeline';
    
    
    
    const LinkTab: React.ComponentType<TabProps & LinkProps> = Tab as React.ComponentType<TabProps & LinkProps>;
    
    function NavBar() {
      const [value, setValue] = React.useState(0);
    
      // console.log(value);
    
    
      const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
        setValue(newValue);
      };
    
      return (
      <div >
      <AppBar position="static">
               <Tabs>
                   <Tab label="Exchanges" to="/exchange" component={Link}  />
                   <Tab label="Coins" to="/" component={Link}  />
                   <Tab label="Home" to="/pm" component={Link}  />
               </Tabs>
         </AppBar>
      </div>
    )
    };
    
    const App = () => {
      return (
        <Router>
          <div>
            <NavBar  />
            <Switch>
              <Route exact path="/" component={Coins} />
              <Route exact path="/exchange" component={Exchanges} />
              <Route exact path="/market"  >
               <MarketProvider>
                 <Market />
               </MarketProvider>
             </Route>
              <Redirect from="/" to="/" />
            </Switch>
          </div>
        </Router>
      );
    };

file.tsx

 import React from "react";
    import { Grid, Snackbar, SnackbarCloseReason } from "@material-ui/core";
    import { Skeleton, Alert } from "@material-ui/lab";
    import useAxios from "axios-hooks";
    import PrimaryChart from "components/PrimaryChart";
    import SecondaryChart from "components/SecondaryChart";
    import TimeFilterButtons from "components/TimeFilterButtons";
    import { SC } from "./styled";
    import { DataProps } from "interfaces/DataProps";
    import useWindowDimensions from "hooks/useWindowDimensions";
    import { useQueryParams, StringParam } from "use-query-params";
    import { MarketContext } from "store/MarketProvider";
    var x = true;
    const Market = () => {
      const {
        filteredDataState: { filteredData },
      } = React.useContext(MarketContext);
    
    
      const [queryParams] = useQueryParams({
        id: StringParam,
        name: StringParam,
      });
      const [timeFilter, setTimeFilter] = React.useState<string>("1");
      const [isErrorMessage, setIsErrorMessage] = React.useState<string>("");
      const [boxWidth, setBoxWidth] = React.useState<number>(0);
      const { height } = useWindowDimensions();
      const [{ data, loading, error }, fetch] = useAxios(
        {
          url: `https://api.coingecko.com/api/v3/coins/${queryParams?.id}/market_chart?vs_currency=usd&days=${timeFilter}`,
          method: "GET",
        },
        { manual: true }
      );
      const gridItemRef = React.useRef<HTMLDivElement>(null);
    
      React.useEffect(() => {
        if (queryParams.id && queryParams.name) {
          fetch();
        }
      }, [fetch, queryParams, queryParams.id, queryParams.name]);
    
      React.useEffect(() => {
        if (error) {
          setIsErrorMessage(error.message);
        }
      }, [error]);
    
      React.useEffect(() => {
        const handleResize = (width?: number) => {
          setBoxWidth(width || 0);
    
    
    
        };
    
        handleResize(gridItemRef.current?.clientWidth || 0);
    
        window.addEventListener("resize", () =>
          handleResize(gridItemRef?.current?.clientWidth || 0)
        );
    
        return () => {
          window.removeEventListener("resize", () => handleResize());
        };
      }, [gridItemRef]);
    
      const mappedData: DataProps[] = React.useMemo(() => {
        return data
          ? data?.prices.map((ele: any) => ({
              date: new Date(ele[0]),
              price: ele[1],
            }))
          : [];
      }, [data]);
    
      const handleError = (
        e: React.SyntheticEvent<any>,
        reason?: SnackbarCloseReason
      ) => {
        setIsErrorMessage("");
      };
    
      return (
        <Grid container justify="center">
          <Grid ref={gridItemRef} item xs={12} md={10} lg={8}>
            <SC.MarketHeader>
              <SC.Title>{queryParams?.name}</SC.Title>
              <TimeFilterButtons
                value={timeFilter}
                onChange={(v) => setTimeFilter(v || "")}
              />
            </SC.MarketHeader>
            {loading ? (
              <Skeleton
                variant="rect"
                height={Math.floor(height * 0.6)}
                width={boxWidth}
              />
            ) : mappedData?.length ? (
              <>
                <PrimaryChart
                  data={filteredData ?? []}
                  height={Math.floor(height * 0.4)}
                  width={boxWidth}
                  margin={{
                    top: 16,
                    right: 16,
                    bottom: 40,
                    left: 48,
                  }}
                />
                <SecondaryChart
                  data={mappedData ?? []}
                  height={Math.floor(height * 0.1)}
                  width={boxWidth}
                  margin={{
                    top: 0,
                    right: 16,
                    bottom: 24,
                    left: 48,
                  }}
                />
              </>
            ) : null}
          </Grid>
          <Snackbar open={!!isErrorMessage} onClose={handleError}>
            <Alert onClose={handleError} severity="error">
              {isErrorMessage}
            </Alert>
          </Snackbar>
        </Grid>
      );
    };
    
    export default Market;

Answer 1

我看不出任何重新加载 bth 的原因，但我在想，如果您进行条件渲染并使用布尔值处理什么时候应该重新加载就可以了

类似：

customer.Save()

...

const [hasAlreadyReload, setHasAlreadyReload] = React.useState(false);

如何仅重新加载页面一次反应？

1 个答案: