ReactJs：错误：超过最大更新深度。 React 限制嵌套更新的数量以防止无限循环答案

【问题标题】：ReactJs :Error: Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loopsReactJs：错误：超过最大更新深度。 React 限制嵌套更新的数量以防止无限循环
【发布时间】：2020-08-09 05:28:51
【问题描述】：

每当我添加 if(IsLogged()){...} 块时，我都会收到此错误。

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

我在这里阅读了其他类似的问题，但我无法理解我做错了什么。

我是 React Js 的新手，所以请多多包涵。

render() {
        if (IsLogged()) {
            return <Redirect to="/" />;
        }
        return (
            <Grid
                textAlign="center"
                style={{ height: "75vh" }}
                verticalAlign="middle"
            >
                <Grid.Column style={{ maxWidth: 450 }} columns={2}>
                    <Segment>
                        <Grid.Row>
                            <Header as="h1" color="teal" textAlign="center">
                                Log In
                            </Header>
                        </Grid.Row>
                        <Form
                            onSubmit={this.submitLogin}
                            style={{ paddingTop: "1rem" }}
                        >
                            <Form.Input
                                icon="mail"
                                iconPosition="left"
                                placeholder="Email"
                                fluid
                                value={this.state.email}
                                onChange={(e) =>
                                    this.setState({ email: e.target.value })
                                }
                            />

                            <Form.Input
                                icon="lock"
                                iconPosition="left"
                                fluid
                                placeholder="Password"
                                type="password"
                                value={this.state.password}
                                onChange={(e) =>
                                    this.setState({
                                        password: e.target.value,
                                    })
                                }
                            />

                            <Button color="teal" fluid size="large">
                                Log In
                            </Button>
                        </Form>
                        <Grid.Row style={{ paddingTop: "1rem" }}>
                            <div style={{ marginTop: "1rem" }}>
                                Not Singed In Yet?
                                <Link to="/signup">Sign Up</Link>
                            </div>
                        </Grid.Row>
                    </Segment>
                </Grid.Column>
            </Grid>
        );

function IsLogged() {
    let token = sessionStorage.getItem("jwtToken");

    if (!token || token === ""|| token === null || typeof token ==="undefined") {
        return false;
    } else {
        return true;
    }
}

export default IsLogged;

【问题讨论】：

这个问题似乎与重定向有关。但是要解决这个问题，我们需要更多关于组件结构和路由处理方式的信息
另外，如果可能的话，贴出IsLogged函数的代码
始终尝试发布所有相关代码（不包含敏感内容），以便读者无需假设即可轻松理解代码。
@ShanakaRusith 我想我解决了这个问题。在删除 IsLogged 函数中的多项检查后，您会看到它开始正确重定向。但我还是不明白为什么会这样？
你是否在首页渲染这个组件？如果你这样做了，我想这个<Redirect /> 可能会每次都呈现并尝试一次又一次地重定向到主页。

标签： javascript reactjs

【解决方案1】：

当您在渲染块中使用setState() 时也可能发生此错误，然后它会导致无限重新渲染。你的 isLogged() 函数里面有什么？很可能您应该检查用户是否使用 true/false 变量登录，既不在渲染块中执行函数，这可能导致无限循环

【讨论】：

【解决方案2】：

我不确定您的 IsLogeed 方法是什么？但是尝试...

if (!IsLogged()) {
        return <Redirect to="/" />;
    }

【讨论】：

【解决方案3】：

尝试更改您的 onChange 处理程序以包含 e.preventDefault(); https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

onChange={(e) => {
  e.preventDefault();        
  // setState here
  }
}

【讨论】：