Javascript 未明确说明重置的反应状态

我正在用react和firebase制作一个小型web应用程序。我的问题是，当用户登录时，

isLoggedIn

状态从

null

变为

true

变回null，因此导航栏无法更改以显示用户已登录

在

App.js

中，为了简洁起见，我删去了很多内容：

class App extends Component {
 constructor(props) {
   super(props);
    this.state = {
     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
     });
   });
 }

该函数允许用户通过谷歌弹出窗口登录，谷歌弹出窗口还返回一个布尔值，表示认证是否成功，无论哪种方式，我都使用该值设置状态

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

当我尝试

console.log

用户在登录过程中状态的变化时，看起来是这样的：

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>
     );
    };

我想知道的是，为什么在最后一刻突然变回来了

我原本以为这是发生在

组件didmount（）

上的函数，但是注释out没有效果

我认为出现错误的另一个原因可能是因为我使用的是函数组件，如果表达式返回null或undefined，它将保留该值作为原始值，我想知道我是否执行了if语句，以便函数在运行之前等待一定时间，它将能够再次获取

true

状态

---

提前感谢

看起来这种行为是由以下行引起的：

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

注销

因为您正在

onClick

中调用

props.handleLogOut（）

，而不是给它一个要调用的函数。您应该执行类似于

onClick={props.handleLogOut}

或

onClick={（）=>props.handleLogOut（）}

的操作

以下是您的情况：

您没有登录。因此，不会呈现到注销的

Link

，也不会调用

props.handleLogout

您正在登录，并且

道具。isLoggedIn

将变为

true

导航

组件重新加载导致此链接有问题的

链接

props.handleLogout

调用将用户重置为空

这只是一种打字错误。

一些建议：1）在

导航组件中，您有一行：
注销
。确保onClick包含一个等号，如：
注销
。2） 在列表中有条件地呈现一个
div
，然后在该
div
中呈现
li
s。列表元素的唯一子元素应该是
li
s。3） 向每个组件添加更多控制台日志可能会有所帮助，这样您就可以在控制台中看到每个组件被渲染了多少次。例如：将
console.log（“App:，this.state）
添加到App。