为什么即使我使用了 useEffect 我的组件也不会重新渲染自己？（React.js）

Question

最近，我正在制作我的 web 应用程序，但我正在努力解决一个小问题（对我来说并不小）

下面是我的 app.js，我想通过登录/退出状态有条件地渲染 NAV 组件。 （你可以看到它在 Switch 外面！）

<>

      <Nav indexStatus={indexStatus} setIndexStatus={setIndexStatus} />
      
      <Index indexStatus={indexStatus} setIndexStatus={setIndexStatus} />

      <Switch>
        <Route exact path="/" component={Auth(LandingPage,null)}/>
        <Route exact path="/login" component={Auth(LoginPage,false)}/>
        <Route exact path="/calendar" component={Auth(Calendar,true)} />
        <Route exact path="/about" component={Auth(About,false)} />
        <Route exact path="/register" component={Auth(RegisterPage,false)}/>
      </Switch>
      
    </>

为了检查登录状态，我在用户登录/退出时为 localStorage 提供了 true/false 值

登录：

dispatch(loginUser(body))
    .then(response=>{
      if(response.payload.loginSuccess){
        localStorage.setItem('user',response.payload.loginSuccess)
        props.history.push("/")
       console.log(props.parentNode)
       
       
      }else{
        alert('login failed')
      }
    })

退出：

 axios.get("/api/users/logout")
    .then(res=>{
      if(res.data.success){
        console.log(res)
       history.push('/login')
       localStorage.setItem('user','false')

        
    }else{
        alert("Logout failed")

    }
  })
}

我给了 localStorage 值，如下所示：

const [loginStatus,setLoginStatus] =useState(localStorage.getItem('user'))

我用 console.log 检查它，它工作正常

所以我使用 useEffect 来更改 loginStatus 值，并仅重新渲染 localstorage 已更改

const checkLoginStatus= localStorage.user
  useEffect(()=>{
    
    if(checkLoginStatus==='true'){
      setLoginStatus(true)
    }else{
      setLoginStatus(false)
    }
  },[checkLoginStatus])
  console.log(localStorage.user)

最后，我用 ?: 运算符编写了代码，如下所示

return (
    <>
    {loginStatus ===true ? (
      <div>
      <div className="nav">
        <h2>TITLE</h2>
        <div className="buttons">
          <div>About</div>
          <div>How to use</div>
          <button onClick={logoutHandler}>Logout</button>

        <StyledLink to="/login"><FontAwesomeIcon icon={faSignInAlt}/></StyledLink>
        
        
          <button onClick={()=>setIndexStatus(!indexStatus)} >Index</button>
        </div>
      </div>
    </div>)

    
    :
     ( <div>
      <div className="nav">
        <h2>TITLE</h2>
        <div className="buttons">
          <div>About</div>
          <div>How to use</div>
          <button onClick={logoutHandler}>Logout</button>

        <StyledLink to="/login"><FontAwesomeIcon icon={faSignInAlt}/></StyledLink>
        <StyledLink to="/register"><FontAwesomeIcon icon={faUserPlus}/></StyledLink>
        
          <button onClick={()=>setIndexStatus(!indexStatus)} >Index</button>
        </div>
      </div>
    </div>
    )}
    </>

    
    
 
  
   
   );
     }

export default Nav

但是，问题是它只能部分工作，我必须刷新页面才能工作组件条件渲染。我不确定为什么会这样，即使我使用 useEffect 和第二个参数 [checkLoginStatus]

你能告诉我为什么不能正常工作吗？我的逻辑怎么错了？ 感谢阅读，感谢您的帮助

Answer 1

您需要将loginStatus 状态提升到App 父组件，以便可以将状态和更新函数传递给子组件以进行读取和/或更新。

应用程序

将loginStatus 状态移动到这个父组件。将loginStatus 传递给Nav 组件以使其处理其条件渲染，并将setLoginStatus 传递给Login 组件以使其更新状态。请注意，路由已重新排序，因此它们不再需要在任何地方指定 exact 属性，它们没有被 Auth HOC 包裹，因为这可能会在每个渲染周期创建一个新组件，现在 Login 组件是渲染在 render 道具上，这样我们就可以加入额外的道具。

const [loginStatus, setLoginStatus] = useState(
  () => !!JSON.parse(localStorage.getItem("user")),
);

return (
  <>
    <Nav
      indexStatus={indexStatus}
      loginStatus={loginStatus} // <-- pass login status
      setIndexStatus={setIndexStatus}
      setLoginStatus={setLoginStatus} // <-- pass updater
    />
  
    <Index indexStatus={indexStatus} setIndexStatus={setIndexStatus} />

    <Switch>
      <Route
        path="/login"
        render={props => <LoginPage {...props} setLoginStatus={setLoginStatus} />}
      />
      <Route path="/calendar" component={Calendar} />
      <Route path="/about" component={About} />
      <Route path="/register" component={RegisterPage} />
      <Route path="/" component={LandingPage} />
    </Switch>
  </>
);

导航

移除loginStatus 状态并使用传递的loginStatus 值和setLoginStatus 函数更新父级中的状态。

function Nav({ indexStatus, loginStatus, setLoginStatus, setIndexStatus }) {
  const history = useHistory();

  const logoutHandler = () => {
    ...
    setLoginStatus(false); // <-- logged out
  };

  return loginStatus ? (
    ...
  )
  : (
    ...
  );
}

登录页面

通过props访问setLoginStatus状态更新器功能，设置用户登录成功时。使用 Auth HOC 装饰导出（应该为所有需要它的组件完成此操作）。

function LoginPage(props) {
  ...

  const onSubmitHandler=(e)=>{
    e.preventDefault();

    let body={
      email: Email,
      password: Password
    };

    dispatch(loginUser(body))
      .then(response=>{
        if(response.payload.loginSuccess){
          localStorage.setItem('user',response.payload.loginSuccess)
          props.setLoginStatus(true); // <-- set logged in
          props.history.push("/");
        } else {
          alert('login failed');
        }
      });
  }

  return (
    <>
      ...
    </>
  );
}

export default Auth(withRouter(LoginPage));

更新

您的组件没有收到传递的 props 的原因是 Auth HOC 没有传递它们。

export default function(SpecificComponent, option, adminRoute = null) {
  ...
  function AuthenticationCheck(props) { // <-- props
    ...
    return (
      <SpecificComponent /> // <-- not passed through
    );
  }
  return AuthenticationCheck
}

应该是

export default function(SpecificComponent, option, adminRoute = null) {
  ...
  function AuthenticationCheck(props) { // <-- props
    ...
    return (
      <SpecificComponent {...props} /> // <-- passed through
    );
  }
  return AuthenticationCheck
}