Question

我正在制作一个带有React和Firebase的小型Web应用程序。我的问题是，当用户登录时，isLoggedIn的状态从null到true返回空，因此导航栏无法更改以显示用户已登录。

在App.js中，为简洁起见，我做了很多删节：

class App extends Component {
 constructor(props) {
   super(props);
    this.state = {
     isLoggedIn: null
    };
  }

如您所见，如果用户登录成功，isLoggedIn = null是我想要更改为true的原始状态

 componentDidMount() {
  auth.onAuthStateChanged((user) => {
  if (user) {
    this.setState({isLoggedIn: user.I})
  } 
 });
}

componentDidMount()中的上述功能用于在页面刷新时处理状态重置。这是一个firebase函数，可以获取用户上一次活动的时间，并将此状态作为布尔值返回给用户是否仍在登录。在这里，我要执行的操作只是在用户通过身份验证时设置状态，否则，什么也不做，以便用户可以登录。

handleLogIn = (e) => {
   e.preventDefault();
   auth.signInWithPopup(provider)
   .then((result) => {
     const isLoggedIn = result.user.I;
     this.setState({
      isLoggedIn: isLoggedIn
     });
   });
 }

此功能允许用户通过Google弹出式窗口登录，该窗口还会返回一个布尔值，表示该端是否通过身份验证，无论哪种方式，我都使用此值来设置状态。

render(props) {
  return (
    <div>
      <Navigation
       {...props}
        isLoggedIn={this.state.isLoggedIn}
        handleLogIn={this.handleLogIn}
       />
    )
   }
  export default App

最后，我正在将这些函数传递给我的Navigation.js，这是一个仅需要道具的功能组件。看起来像这样：

import React from "react";
import { Link } from "react-router-dom";

export default function Navigation (props) {
  console.log(props.isLoggedIn)
  return (
    <ul className="tabs tabs-transparent">
     <li className="tab">
       <Link to="/">Home</Link>
     </li>
     <li className="tab">
    <Link to="/all_stories">All 
     Stories</Link>
     </li>
     <li className="tab">
    <Link to="/story/create">Write A 
    Story</Link>
    </li>
    {props.isLoggedIn ? (
       <div>
        <li className="tab">
          <Link to="/user/:id/profile">Profile</Link>
         </li>

         <li className="tab">
           <Link to="/logout" onClick={props.handleLogOut()}>Log Out</Link>
            </li>
            </div>
              ) : (
          <li className="tab">
         <Link to="/all_stories" onClick={(e) => props.handleLogIn(e)}>Log In</Link>
                  </li>
              )}
       </ul>
     );
    };

当我尝试console.log进行用户登录过程中的状态更改时，看起来像这样：

我想知道的是为什么在最后一刻突然变回原来的状态？

我原本以为这是componentDidMount()处发生的功能，但评论说没有任何作用
我认为出现错误的另一个原因可能是因为我使用的是功能组件，如果表达式返回null或未定义，它将将该值保留为原始值，我想知道是否对if做if语句函数可以在运行之前等待一定的时间，以便能够再次获取true状态。

提前谢谢

Answer 1

此行为是由以下行引起的：

<Link to="/logout" onClick={props.handleLogOut()}>Log Out</Link>

因为您是在props.handleLogOut()中调用onClick，而不是为其提供调用功能。您应该做类似onClick={props.handleLogOut}或onClick={() => props.handleLogOut()}的事情。

这是您的情况：

您尚未登录。因此，不会呈现Link退出登录，也不会调用props.handleLogout。
您正在登录，props.isLoggedIn成为true。
Navigation组件会重新呈现此有问题的Link。
props.handleLogout要求将用户重置为空。

那只是一种错字。

在未明确说明的情况下重置React State

1 个答案: