setState 在 ReactJS GET 方法中不起作用

Question

我一直在尝试为我的网站制作一个导航栏来处理登录和注销身份验证。根据用户是否登录显示登录或注销按钮。我已成功检索到所需的数据，但在呈现并将其保存在我的导航栏组件中时遇到问题，它看起来像这样：

import React from 'react';

class Navbar extends React.Component {
  constructor(props){
  super(props)
this.state = { loggedin: ''}
this.isLoggedIn = this.isLoggedIn.bind(this)
  }


  componentDidMount(){
fetch('/user-status', {method: 'GET'}).then(res => res.json()).then(data =>{
  this.setState({loggedin: data})
});

  }

  isLoggedIn(){
fetch('/user-status',{ method: 'GET'})
.then(function (response) {
  return response.json();
  }).then(function (textie) {
this.setState({loggedin: textie})
return textie;
  });

}



  render() {
if(this.isLoggedIn == 'true'){
return(
  <a className="nav-item nav-link" href="/logout">Logout</a>
);
 }

return (
 <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
   <a className="navbar-brand" href="#">Navbar</a>
   <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
     <span className="navbar-toggler-icon"></span>
   </button>
   <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
   <div className="navbar-nav">
     <a className="nav-item nav-link active" href="#">Home <span className="sr-only">(current)</span></a>
     <a className="nav-item nav-link" href="/about">About</a>
     <a className="nav-item nav-link" href="/signin">Sign in/Sign Up</a>
     <a className="nav-item nav-link" href="/profile">My Profile</a>
     <a className="nav-item nav-link" href="/leaderboard">Top Forecasts</a>
    
   </div>
   </div>
 </nav>
    );

  }
}

export default Navbar;

/user-status 方法获取用户是否从 Flask 后端登录，并返回 true 或 false。一旦它在 isLoggedIn 中更改，我会尝试保存它，但我得到错误 cannot 'setState' on undefined。另外，当它从 isLoggedIn 返回 textie 时，它​​返回语句 'bound isLoggedIn' 而不是 true 或 false，我不知道为什么。

我尝试在渲染部分中说，如果 login 变量为 true，将有一个 Navbar 选项用于注销，但如果没有，将有一个 navbar 选项用于登录。任何想法为什么这不是工作，这个错误不断弹出？我想我想知道的是如何将获取的数据保存到反应组件中。

Answer 1

在if(this.isLoggedIn == 'true') 这一行中，您正在检查此范围内的函数isLoggedIn 是否等于true，但我认为您实际上应该调用this.state.isloggedIn == 'true'。

Answer 2

试试这个：

class Navbar extends React.Component {
  state = { loggedin: '' };

  componentDidMount() {
    this.isLoggedIn();
  }

  isLoggedIn = () => {
    fetch('/user-status')
      .then((res) => res.json())
      .then((data) => this.setState({ loggedin: data }));
  };

  render() {
    if (this.state.loggedin == 'true') {
      return (
        <a className='nav-item nav-link' href='/logout'>
          Logout
        </a>
      );
    }

    return (
      <nav className='navbar navbar-expand-lg navbar-dark bg-primary'>
        <a className='navbar-brand' href='#'>
          Navbar
        </a>
        <button
          className='navbar-toggler'
          type='button'
          data-toggle='collapse'
          data-target='#navbarNavAltMarkup'
          aria-controls='navbarNavAltMarkup'
          aria-expanded='false'
          aria-label='Toggle navigation'
        >
          <span className='navbar-toggler-icon'></span>
        </button>
        <div className='collapse navbar-collapse' id='navbarNavAltMarkup'>
          <div className='navbar-nav'>
            <a className='nav-item nav-link active' href='#'>
              Home <span className='sr-only'>(current)</span>
            </a>
            <a className='nav-item nav-link' href='/about'>
              About
            </a>
            <a className='nav-item nav-link' href='/signin'>
              Sign in/Sign Up
            </a>
            <a className='nav-item nav-link' href='/profile'>
              My Profile
            </a>
            <a className='nav-item nav-link' href='/leaderboard'>
              Top Forecasts
            </a>
          </div>
        </div>
      </nav>
    );
  }
}

export default Navbar;