javascript - 如何在函数react js中更新组件状态？

Question

我有两个组件

• 登录组件
• header 组件

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

下面是代码...

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

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

在componentDidMount()中加载所需的数据，并在state中设置其值，并在render中检查state值，并且不要使用多个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>

)