Javascript 反应状态更改不会导致重新渲染

我试图在单击一个单独的div时切换div的可见性。问题是它会在第一次单击时将div设置为不可见，并且仅当它开始时可见。之后，它将保持不可见，不会更新。但是，该状态仍在控制台中切换

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super()
    this.state = {
      vis: '0'
    }
  }

  toghide=()=>{
    console.log("toggle login", this.state.vis)
    if(this.state.vis === "hidden"){
      console.log('showing')
      this.setState((state, props)=>({vis:'0'}))
    } else {
      console.log('hiding')
      this.setState((state, props)=>({vis:'hidden'}))
    }
  }

  render() {

    const styles = {
      visibility: this.state.vis
    }

    return (
      <div className="App">
        <div className="salebar"><a className="salebar sale" 
href="login">Click here!</a></div>
        <div className="navbar">
            <div className="nav"><div className="nnav">JMZ</div></div>
            <div className="nav2"><div className="nnav2">PRODUCTS</div></div>
            <div className="loginContainer"><div className="login" onClick={this.toghide}>LOGIN/SIGN UP</div></div>
        </div>
        <div className="login-container">
          <div className="lognester">
            <div style={styles} className="login-tab">
              <input className="user" type="text" placeholder="Username"/>
              <input className="password" type="password" placeholder="Password"/>
              <button className="user">Login</button>
          Sign in or <a className="register-link" href="register">register</a> a new account.
            </div>
          </div>
        </div>
        <div className="intro-pics"></div>
        <div className="content"></div>

        <audio preload loop controls autoPlay className="audio">
          <source src="https://memefly.me/i/toValhalla.mp3"/>
            Your browser does not support the audio element.
        </audio>
      </div>
    );
  }
}


export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
vis:'0'
}
}
toghide=（）=>{
log（“切换登录”，this.state.vis）
如果（this.state.vis==“隐藏”）{
console.log（'显示'）
this.setState（（state，props）=>（{vis:'0'}））
}否则{
console.log（'隐藏'）
this.setState（（state，props）=>（{vis:'hidden'}））
}
}
render（）{
常量样式={
可见性：this.state.vis
}
返回(
JMZ
产品
登录/注册
登录
登录或使用新帐户。
您的浏览器不支持音频元素。
);
}
}
导出默认应用程序；

您的代码有两个问题

它应该是可见性：可见，而不是可见性：0。所以改变这个

从来没有。。。在渲染函数中设置状态，这是非常糟糕的做法

1）您可以在渲染上面声明

togHide

方法，例如

toghide = () => {
//your code
}

render(){...}

2）如果在vis状态上使用

true/false

布尔逻辑，您可以更好地处理可见性条件。这可以是：

 constructor(){
        super()
        this.state = {
          vis: true
        }
      }


toghide = () => {

if(this.state.vis){

this.setState({
vis : false

})}

else{
this.setState({
vis : true
})}

3）在toghide方法中，可以使用我上面使用的setState代码。如果不使用任何道具，则不必传递道具，也不需要在设置状态中使用

return

。

尝试以下方法：

class App extends Component {
  constructor() {
    super();
    this.state = {
      vis: true
    };
  }
  toghide = () => {
    this.setState({ vis: !this.state.vis });
  };
  render() {
    return (
      <div className="App">
        <div className="salebar">
          <a className="salebar sale" href="login">
            Click here
          </a>
        </div>
        <div className="navbar">
          <div className="nav">
            <div className="nnav">JMZ</div>
          </div>
          <div className="nav2">
            <div className="nnav2">PRODUCTS</div>
          </div>
          <div className="loginContainer">
            <div className="login" onClick={this.toghide}>
              LOGIN/SIGN UP
            </div>
          </div>
        </div>
        <div className="login-container">
          <div className="lognester">
            {this.state.vis ? (
              <div className="login-tab">
                <input className="user" type="text" placeholder="Username" />
                <input
                  className="password"
                  type="password"
                  placeholder="Password"
                />
                <button className="user">Login</button>
                Sign in or{' '}
                <a className="register-link" href="register">
                  register
                </a>{' '}
                a new account.
              </div>
            ) : (
                ''
              )}
          </div>
        </div>
        <div className="intro-pics" />
        <div className="content" />
      </div>
    );
  }
}
export default App;

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
维斯：是的
};
}
toghide=（）=>{
this.setState（{vis:！this.state.vis}）；
};
render（）{
返回(
JMZ
产品
登录/注册
{this.state.vis(
登录
登录或{'}
{' '}
一个新帐户。
) : (
''
)}
);
}
}
导出默认应用程序；

这是演示：