刷新后Reactjs保存状态

Question

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

编辑： 添加了一些带有“this.props.currentUser”的console.log，当我登录时： console log Header:23 in 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} />
    }}}

Answer 1

尝试在 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 组件上实现状态相同。 Header 组件的状态设置不正确，只能使用setState 方法更新

Answer 2

将 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}/>
    
       
       
    }
  }