setState更改后，某些React组件未重新呈现

Question

我有一个表单，顶部有两个按钮，即“注册/登录”，底部有一个按钮，即“入门”。我正在努力使组件彼此更新。从默认的“注册”组件中，我可以单击“入门”按钮，该表单消失，并按原样显示产品组件。我的问题是我无法显示“登录”组件而不是“注册”。

以下是我正在使用的代码-您将看到我在其中两个if语句中注释掉的地方，这些意图是我试图使应用程序加载其任何状态的最后一个返回值？当我尝试添加第三个组件时，该语句似乎使我感到震惊。我可以正确地将状态设置为“ loginShow”，尽管没有什么改变，只是记录在控制台中。

如何正确设置状态，使其仅在“注册”和“登录”之间来回切换，直到我按下底部的“入门”按钮？

clickMe = () => {
        const {requestedPostsThatWeGotFromGecko} = this.state;
        this.setState({ requestedPostsThatWeGotFromGecko: !requestedPostsThatWeGotFromGecko })
    }
    mainLogIn = () => {
    //  const {loginStatus} = this.state;
        this.setState({ loginStatus: 'loginShow' })
    }
    render() {
        const { requestedPostsThatWeGotFromGecko } = this.state;
        const { loginStatus } = this.state;
        console.log(loginStatus);
//      if (loginStatus === "loginHide") return <SignUp login={() => this.clickMe()} />
        if (loginStatus === "loginShow") return <Login /> 
//      if (requestedPostsThatWeGotFromGecko.props === true) return <Cards /> 
          return (

           <div className="gecko">
            {requestedPostsThatWeGotFromGecko ? (
              <Cards />
            ): (
             <SignUp login={() => this.clickMe()} />
            )
            }
          </div> 
        ); 
      }