useEffect处于无限循环中

Question

我有一个组件，一旦它渲染，我需要将用户重定向到另一个路径，我正在使用 useEffect 钩子的反应，但它一遍又一遍地渲染而不停止：

const App: FunctionComponent<{}> = () => {
const [message, setMessage] = useState("");
useEffect(() => {
if (condition) {
setMessage("you are being redirected");
setTimeout(() => {
location.href = `http://localhost:4000/myurl`;
}, 2000);
} else {
setMessage("you are logged in");
setTimeout(() => {
<Redirect to={"/pages"} />;
}, 2000);
}
}, [message]);
return (
<>
{message}
<BrowserRouter>
<Route exact path="/login/stb" render={() => <Code />} />
</BrowserRouter>
</>
);
};
export default App;

Answer 1

看起来setMessage正在组件中设置message状态变量。这发生在每次运行useEffect期间。状态更改将导致组件重新渲染。

基本上，导致循环的流程是这样的：

1. 初始组件渲染
2. 使用效果运行
3. message状态已更新
4. 由于状态更改而导致组件重新渲染
5. useEffect 在更改时被触发时运行message
6. 返回步骤 3

如果您希望useEffect仅在初始渲染时运行，并在用户登录后重定向，则可以将其更改为如下所示的内容：

const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
if (someConditionHere) {
setLoggedIn(true);
}, []);
return (
loggedIn ? <Redirect to={"/pages"} /> :
<BrowserRouter>
<Route exact path="/login/stb" render={() => <Code />} />
</BrowserRouter>
);

我对设置一无所知，所以这是简化并做出一些假设。