如何重载一个页面只有一次反应?

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

我看不出有任何理由重新加载但我想如果你做条件渲染并处理布尔值何时应该重新加载这将是ok的

类似:

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

…

hasAlreadyReload && <Redirect from="/" to="/" />