刷新后ReactJS保存状态

问题描述

我正在尝试创建简单的身份验证，但是显示内容有一些问题。在componentDidMount中，我获取有关urrent用户的信息，然后将其传递到Header，在if语句中确定状态“页面”。我使用“ changePage”在登录或注销后更改此状态。但是我的Header中的if语句无法正常工作：登录后它显示注销，但是刷新页面后它显示登录，尽管this.props.currentUser存在。

编辑：当我登录时，添加了一些带有“ this.props.currentUser”的console.log： console log 标头：23在ComponentDidMount中，因此从Main传递currentUser时出现了一些问题

Main.js

class App extends React.Component {
  constructor(){
      super();
      this.state = {        
    currentUser: null,}      
  this.updateCurrentUser = this.updateCurrentUser.bind(this);      

}
componentDidMount(){            

  let that = this
  axios.get('http://localhost:3000/isUser',{
  })
  .then(function(response){
    console.log(response.data.email)

    if(response.data.email){
      that.setState({
        currentUser: response.data.email
      })
    } else {
      that.setState({
        currentUser: null
      })
    }
  })
  .catch(function(error){
    console.log(error);
  })
}
updateCurrentUser(email) {
  this.setState({
    currentUser: email
  })
}   



 render(){ 
       
    return <Header updateCurrentUser={this.updateCurrentUser} token = {this.props.ids.token} currentUser = {this.state.currentUser}/>

   
   
}

}

Header.js

class Header extends React.Component {
constructor(props){
    super(props);
    if (this.props.currentUser == null){
      this.state = {
        page:"login"
      }
    } else{
      this.state = {
        page: "delete"
      }
    }
  
    this.changePage = this.changePage.bind(this);
  }
 
changePage(newPage) {
    this.setState({
      page: newPage
    })
  }
render() {
    switch(this.state.page) {
      case "signup":
         
        return <Signup changePage={this.changePage} updateCurrentUser={this.props.updateCurrentUser} token = {this.props.token} currentUser = {this.props.currentUser}/>
      case "login":
        return <Login changePage={this.changePage} updateCurrentUser={this.props.updateCurrentUser}token = {this.props.token} currentUser = {this.props.currentUser}/>
      case "delete":
        return <logout changePage={this.changePage} updateCurrentUser={this.props.updateCurrentUser} token = {this.props.token} currentUser = {this.props.currentUser} />
    }}}

解决方法

尝试像这样在 Header 组件中设置状态：

constructor(props){
    super(props);
    this.state = {
        page: (this.props.currentUser) ? "delete" : "login"
    }
  
    this.changePage = this.changePage.bind(this);
}

更新您也可以尝试以下方法：

constructor(props){
    super(props);
    this.state = {
        page: ""
    }
  
    this.changePage = this.changePage.bind(this);
}

然后

onComponentDidMount() {
    if (this.props.currentUser == null){
      this.setState = {
        page:"login"
      }
    } else{
      this.setState = {
        page: "delete"
      }
    }
   
}

与在Main组件上实现状态相同。标头组件上的状态未正确设置，您仅需使用setState方法进行更新

将currentUser传递到我的Header并将页面和changePage转移到Main时出现了一些问题。现在可以了

class App extends React.Component {
      constructor(){
          super();
          this.state = {
            page:"",currentUser: null,}
      
      this.updateCurrentUser = this.updateCurrentUser.bind(this);
      this.changePage = this.changePage.bind(this);


    }
    componentDidMount(){
              

      let that = this
      axios.get('http://localhost:3000/isUser',{
      })
      .then(function(response){
        console.log(response.data.email)

        if(response.data.email){
          that.setState({
            currentUser: response.data.email,page:"delete"
          })
        } else {
          that.setState({
            currentUser: null,page:"login"
          })
        }
      })
      .catch(function(error){
        console.log(error);
      })
    }
    updateCurrentUser(email) {
      this.setState({
        currentUser: email
      })
    }
    changePage(newPage) {
      this.setState({
        page: newPage
      })
    }
    

  render(){  console.log(this.state.currentUser)
           
        return <Header updateCurrentUser={this.updateCurrentUser} token = {this.props.ids.token} currentUser = {this.state.currentUser} page = {this.state.page} changePage={this.changePage}/>
    
       
       
    }
  }

reactjs reactjs