javascript - React State 在没有明确说明的情况下被重置

Question

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

在 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 函数，据说可以获取用户上次事件的时间，并将此状态作为 bool 值返回到用户是否仍处于登录状态。在这里，我希望它做的只是在用户通过身份验证时设置状态，如果没有，什么也不做，以便用户可以登录。

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

此函数允许用户通过 Google 的弹出窗口登录，它还会返回一个 bool 值，表明身份验证是否成功，无论哪种方式，我都使用此值来设置状态。

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

最后，我将这些函数传递给我的 Navigation.js，它是一个只接受 props 的函数式组件。看起来像这样:

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 用户通过登录过程时状态的变化，它看起来像这样:

我想知道的是为什么最后一刻突然变回去了？

1. 我最初认为这是发生在 componentDidMount() 的函数，但注释掉没有效果
2. 我认为有错误的另一个原因可能是因为我使用的是函数式组件，如果表达式返回 null 或 undefined 它将保留该值作为原始值，我想知道我是否为函数在运行之前等待一定的时间，以便它能够再次获取 true 状态。

提前致谢

Answer 1

看起来这种行为是由这一行引起的:

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

因为你在 onClick 中调用 props.handleLogOut() 而不是给它一个函数来调用。您应该执行类似 onClick={props.handleLogOut} 或 onClick={() => props.handleLogOut()} 的操作。

以下是您的情况:

1. 您尚未登录。因此，未呈现用于注销的 Link 并且未调用 props.handleLogout。
2. 您正在登录并且 props.isLoggedIn 变为 true。
3. Navigation 组件重新呈现这个有问题的 Link。
4. props.handleLogout 调用了将用户重置为 null。

这只是一种打字错误。