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

Question

每当我添加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;

Answer 1

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

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

Answer 2

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

Answer 3

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

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