setState没有更新或重新呈现DOM或组件

Question

我无法弄清楚为什么我的Login组件没有重新呈现页面上的内容。单击表单顶部的“登录”按钮后，状态更改为loginShow。

    import React from 'react';
    import SignUp from '../SignUp';
    import Cards from '../Articles/Cards';
    import Login from '../LogIn';


    export default class Gecko extends React.Component {
        constructor(props) {
            super(props);
            this.state = { requestedPostsThatWeGotFromGecko: null,  }
            this.clickMe = this.clickMe.bind(this)

            this.state = {
                loginStatus: "loginHide",
                authType: "signup"
              };
            
              this.loginClose = this.loginClose.bind(this);
              this.loginOpen = this.loginOpen.bind(this);
      }

      loginClose(e) {
        e.stopPropagation();
        this.setState({
          loginStatus: "loginHide"
        });
      }
      
      loginOpen() {
        this.setState({
          loginStatus: "loginShow"
        });
      }
        
        clickMe = () => {
            const {requestedPostsThatWeGotFromGecko} = this.state;
            this.setState({ requestedPostsThatWeGotFromGecko: !requestedPostsThatWeGotFromGecko })
        }
    /*  mainLogIn = () => {
            const {loginStatus} = this.state;
            this.setState({ loginStatus: 'loginHide' })
        } */
        render() {
            const { requestedPostsThatWeGotFromGecko } = this.state;
            const { loginStatus } = this.state;
            console.log(loginStatus);
    //      const { authType } = this.state;
    //      if (loginStatus === "loginHide") return <SignUp login={() => this.clickMe()} /> 
    //      if (requestedPostsThatWeGotFromGecko.props === true) return <Cards />
            if (loginStatus !== "loginShow") return (
                <div className="gecko">
                 {requestedPostsThatWeGotFromGecko ? (
                   <Cards />
                 ): (
                  <SignUp login={() => this.clickMe()} />
                 )
                 }
               </div> 
             );
             if (loginStatus === "loginShow") return <Login /> 
              
          }
    }

我认为问题出在我试图设置上面代码末尾使用条件运算符显示的内容的地方。我在下面的代码中包括了要设置其他组件的状态和道具的位置。

const onClick = () => {
        this.props.login();
        console.log('rich');
    }
    const mainLogIn = () => {
        this.setState({
            loginStatus: "loginShow"
          });
        console.log('rich1');
        console.log(this.state);
    }

const onClick = () => {
        this.props.login();
        console.log('rich');
    }
    const mainSignUp = () => {
    this.props.signup();
        this.setState({
            loginStatus: "loginHide"
          });
        console.log('rich2');
    }