Бесконечный цикл при попытке обновить состояние

Question

Я использую firebase.auth (). OnAuthStateChanged, чтобы изменить свое состояние. Если пользователь не нулевой, я хочу обновить свое состояние и установить в нем информацию о пользователе, однако, когда я пытаюсь это сделать, я получаюбесконечный цикл, однако, когда я удаляю this.setState ({userInfo: user}), код работает без проблем, ниже моего кода:

class Test extends React.Component {

  state = {
    toDashboard: true,
    userInfo: null
  }


  render() {

    firebase.auth().onAuthStateChanged(user =>{
      if(!user){
        this.setState({toDashboard: false});
      }else{ //HERE is where I get the inifinite loop, if I delete the ELSE, it does not go into an infinite loop
        this.setState({userInfo: user});
      }
    })  

    if (this.state.toDashboard === false) {
      return <Redirect to='/auth/login' />
    }

    return (
      <>
        <Sidebar
          {...this.props}
          routes={routes}
          logo={{
            innerLink: "/admin/index",
            imgSrc: require("assets/img/brand/LogoMorado.png"),
            imgAlt: "Logo"
          }}
        />
        <div className="main-content" ref="mainContent">
          <AdminNavbar
            {...this.props}
            brandText={this.getBrandText(this.props.location.pathname)}
          />
          <Switch>{this.getRoutes(routes)}</Switch>
          <Container fluid>
            <AdminFooter />
          </Container>
        </div>
      </>
    );
  }
}

export default Test;

Answer 1

Не используйте setState({}) в render().

Это вызывает infinite loop.

в основном, componentDidMount() сделать это вместо render().

и вы должны узнать о Реагировать жизненным циклом .

https://reactjs.org/docs/react-component.html

componentDidMount(){
    firebase.auth().onAuthStateChanged(user =>{
      if(!user){
        this.setState({toDashboard: false});
      }else{ //HERE is where I get the inifinite loop, if I delete the ELSE, it does not go into an infinite loop
        this.setState({userInfo: user});
      }
    })  

}
render() {


    return (
      <>
        {  (this.state.toDashboard === false)? <Redirect to='/auth/login' /> : null }
        <Sidebar
          {...this.props}
          routes={routes}
          logo={{
            innerLink: "/admin/index",
            imgSrc: require("assets/img/brand/LogoMorado.png"),
            imgAlt: "Logo"
          }}
        />
        <div className="main-content" ref="mainContent">
          <AdminNavbar
            {...this.props}
            brandText={this.getBrandText(this.props.location.pathname)}
          />
          <Switch>{this.getRoutes(routes)}</Switch>
          <Container fluid>
            <AdminFooter />
          </Container>
        </div>
      </>
    );
  }