Question

我有两个组成部分

登录组件
标题组件

我要在登录标题后显示用户名。

下面是代码...

class Header extends Component {

    constructor(props) {

        super(props); 

        this.state = {         
          isLoggedIn: false
        };  
      }

    isLoggedIn = () => {    

        var flag = localStorage.getItem('loggedUser') !== null; 
        this.setState({isLoggedIn : flag}); // this line gives error
        return flag;
    }


  render() {

    if(this.isLoggedIn() == true){

    return(
      <div>
           <div className="header">          
              <div className="headerUser">Logged in as: {localStorage.getItem("loggedUser")}</div>
              <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
           </div>
      </div>
     );

    } else {

    return(
      <div>
           <div className="header">                       
              <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
           </div>
      </div>
     );

    }

    }
}
export default Header;

如何更改函数内部的状态，因为它不允许我使用此关键字。？

错误：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

由于从render()间接调用了setState，因此您的代码已进入渲染循环。在render()通话之后调用setState

在componentDidMount()中加载所需的数据，并在状态中设置其值，并在渲染中检查状态值，不要使用多个return，请参见以下代码。

class Header extends Component {

    constructor(props) {

        super(props); 

        this.state = {         
          isLoggedIn: false
        };  
      }
    componentDidMount() {
       var flag = localStorage.getItem('loggedUser') !== null; 
       this.setState({isLoggedIn : flag}); 
    }    


  render() {

    return(
      { this.state.isLoggedIn ?
        <div>
           <div className="header">          
              <div className="headerUser">Logged in as: {localStorage.getItem("loggedUser")}</div>
              <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
           </div>
      </div>

    : <div>
           <div className="header">                       
              <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
           </div>
      </div>

    })
  }
}
 export default Header;

return()可以像这样进一步优化

 return(

        <div>
           <div className="header">          
              { this.state.isLoggedIn ?<div className="headerUser">Logged in as: {localStorage.getItem("loggedUser")}</div> : null }
              <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
           </div>
      </div>

)

Answer 2

您在渲染时正在调用setState ...试试

class Header extends Component {

constructor(props) {

    super(props); 

    this.state = {         
      isLoggedIn: false
    };  
  }

isLoggedIn = () => {    

    var flag = localStorage.getItem('loggedUser') !== null; 
    // this.setState({isLoggedIn : flag}); // delete here 
    return flag;
}


  render() {

if(this.isLoggedIn() == true){

return(
  <div>
       <div className="header">          
          <div className="headerUser">Logged in as: {localStorage.getItem("loggedUser")}</div>
          <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
       </div>
  </div>
 );

} else {

return(
  <div>
       <div className="header">                       
          <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
       </div>
  </div>
 );

}

}
}
export default Header;

Answer 3

您正在isLoggedIn方法中设置状态，该方法将触发另一个渲染，然后再次调用isLoggedIn，依此类推。您应该直接在渲染中检查状态对象（this.state.isLoggedIn ），则应仅在开始时或用户状态更改时设置状态。

Answer 4

这是你的答案...

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        };
    }

    isLoggedIn = () => localStorage.getItem('loggedUser') !== null;

    render() {
        if(this.isLoggedIn()) {
            return(
                <LoggedIn onMount={() => this.setState({isLoggedIn: this.isLoggedIn()})} />
            );
        } else {
            return(
                <div>
                    <div className="header">
                        <img src={Logo} className="app-logo" alt="logo" width="145" height="55" />
                    </div>
                </div>
            );
        }
    }
}
export default Header;

class LoggedIn extends Component {
    componentWillMount() {
        this.props.onMount();
    }
    render() {
        return (
            <div>
                <div className="header">
                    <div className="headerUser">Logged in as: {localStorage.getItem("loggedUser")}</div>
                    <img src={Logo} className="app-logo" alt="logo" width="145" height="55"/>
                </div>
            </div>
        )
    }
}

export default LoggedIn;

如何在函数React JS中更新组件状态？

4 个答案: