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="/" />;
    }