當 state 更改時重新呈現導航欄

Question

我對 React 和 JSX 還很陌生，正在尋求幫助！

我的應用程序的一部分從 redux 中提取 state 以顯示用戶是否已登錄，我只想渲染導航欄組件，因為有些東西在受保護的路線后面。 一切都按我想要的方式工作，除了我必須刷新頁面以進行更改，所以我希望它根據 state 在更改時傳遞給它或可能是 onclick 的一部分進行更新注銷組件中的事件

這是導航欄組件

export default class Navbar extends Component {

  render() {
  
  const storeAuth = store.getState();
  const isLoggedIn = (storeAuth['auth']['isAuthenticated'])

    if(isLoggedIn){
      return (
        <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
          <Link to="/login" className="navbar-brand">CHK List</Link>
          <div className="collpase navbar-collapse">
          <ul className="navbar-nav mr-auto">
            <li className="navbar-item">
            <Link to="/list" className="nav-link">Daily Checklist </Link>
            </li>
            <li className="navbar-item">
            <Link to="/editlist" className="nav-link">Edit Checklist</Link>
            </li>
            <li className="navbar-item">
            <Link to="/Register" className="nav-link">Register New Users</Link>
            </li>
            <li className="navbar-item">
            <Link to="/Logout" className="nav-link">Logout</Link>
            </li>
          </ul>
          </div>
        </nav>
      );
    }else{
      return (
        <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
          <Link to="/dashboard" className="navbar-brand">CHK List</Link>
          <div className="collpase navbar-collapse">
          <ul className="navbar-nav mr-auto">
          
            <li className="navbar-item">
            <Link to="/login" className="nav-link">Login</Link>
            </li>
          </ul>
          </div>
        </nav>
      );
    }
  }
}

這是 onclick 事件所在的注銷組件

    class Dashboard extends Component {
  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser();
  };

  

  render() {
    
    const { user } = this.props.auth;

    return (
      <div style={{ height: "75vh" }} className="container valign-wrapper">
        <div className="row">
          <div className="landing-copy col s12 center-align">
            <h4>
              <b>Hey {user.name.split(" ")[0]}</b> <p></p>
              <p className="flow-text grey-text text-darken-1">
                Are you sure you want to logout?
              </p>
            </h4>
            <button 
            style={{
                width: "150px",
                borderRadius: "3px",
                letterSpacing: "1.5px",
                marginTop: "1rem"
              }} 
              onClick={this.onLogoutClick} 
              className="btn btn-large waves-effect waves-light hoverable blue accent-3">
              Logout
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Dashboard.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

Answer 1

您可以嘗試使用 mapStateToProps function。

import {connect} from 'react-redux';



 class Navbar extends Component {

  render() {
 
  let isLoggedIn = this.props.isLoggedIn 

if(isLoggedIn){
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/login" className="navbar-brand">CHK List</Link>
      <div className="collpase navbar-collapse">
      <ul className="navbar-nav mr-auto">
        <li className="navbar-item">
        <Link to="/list" className="nav-link">Daily Checklist </Link>
        </li>
        <li className="navbar-item">
        <Link to="/editlist" className="nav-link">Edit Checklist</Link>
        </li>
        <li className="navbar-item">
        <Link to="/Register" className="nav-link">Register New Users</Link>
        </li>
        <li className="navbar-item">
        <Link to="/Logout" className="nav-link">Logout</Link>
        </li>
      </ul>
      </div>
    </nav>
  );
}else{
  return (
    <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
      <Link to="/dashboard" className="navbar-brand">CHK List</Link>
      <div className="collpase navbar-collapse">
      <ul className="navbar-nav mr-auto">
      
        <li className="navbar-item">
        <Link to="/login" className="nav-link">Login</Link>
        </li>
      </ul>
      </div>
    </nav>
  );
}
  }
}

const mapStateToProps=(state)=>{
return {
    isLoggedIn : state.auth.isAuthenticated
}
}
 export default connect(mapStateToProps)(Navbar )