错误：表单中超出最大更新深度

Question

所以我遇到了“最大更新深度增加”错误，我尝试了所有可能的解决方案，但没有成功。请看一下我的代码，谢谢。

class RegisterPage extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
      cardAnimaton: "cardHidden",
        name: '',
        email:'',
        password:'',
        password2:'',
        errors:{},
    }

      this.onChange = this.onChange.bind(this);

  }
    componentDidMount() {

        setTimeout(
            function() {
                this.setState({ cardAnimaton: "" });
            }.bind(this),
            700
        );
    }


    onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

  render() {
    const { classes, ...rest } = this.props;
    return (
      <div>
        <Header
          absolute
          color="transparent"
          brand= {<img  alt="NotReallySarahah"  src={img} style={{height:60, width:100}}/>}
          rightLinks={<HeaderLinks />}
          {...rest}
        />
        <div
          className={classes.pageHeader}
          style={{
            backgroundImage: "url(" + image + ")",
            backgroundSize: "cover",
            backgroundPosition: "top center"
          }}
        >
          <div className={classes.container}>
            <GridContainer justify="center">
              <GridItem xs={12} sm={12} md={4}>
                <Card className={classes[this.state.cardAnimaton]}>

                    <CardHeader color="primary" className={classes.cardHeader}>
                        <h3 className={classes.title}>Register</h3>
                      <div className={classes.socialLine}>
                          <Button
                          justIcon
                          href="#pablo"
                          target="_blank"
                          color="transparent"

                        >
                          <i className={"fab fa-google-plus-g"} />
                        </Button>
                      </div>
                    </CardHeader>
                    <p className={classes.divider}>Go Old School</p>
                    <CardBody>
                        <Grid container justify="center">
                            <form className={classes.form} >
                                <FormControl>
                             <Input
                                 placeholder="Name"
                                 value={this.state.name}
                                 onChange={ this.onChange}
                                 name="name"
                              endAdornment={
                                    <InputAdornment position="end">
                                        <i className="fas fa-user"></i>
                                    </InputAdornment>
                                }
                            /><br/>


                            <Input
                                placeholder="Email"
                                onChange={ this.onChange}
                                name="email"
                                value={this.state.email}

                                endAdornment={
                                    <InputAdornment position="end">
                                        <i className="fas fa-at"></i>
                                    </InputAdornment>
                                }
                            /><br/>


                            <Input
                                placeholder="Password"
                                onChange={this.onChange}
                                name="password"
                                value={this.state.password}

                                endAdornment={
                                    <InputAdornment position="end">
                                        <i className="fas fa-key"></i>
                                    </InputAdornment>
                                }
                            /><br/>



                            <Input
                                placeholder="Confirm Password"
                                onChange={this.onChange}
                                name="password2"

                                value={this.state.password2}
                            />
                                </FormControl>
                            </form>
                        </Grid>
                    </CardBody>
                    <CardFooter className={classes.cardFooter}>
                      <Button  color="primary" size="lg" round>
                        Get started
                      </Button>
                    </CardFooter>

                </Card>
              </GridItem>
            </GridContainer>
          </div>
        </div>
      </div>
    );
  }
}

export default withStyles(loginPageStyle)(RegisterPage);