反應狀態變化不會導致重新渲染

Question

我試圖在單擊單獨的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;

Answer 1

嘗試這個：

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;

這是演示： https : //codesandbox.io/s/72zzk2xr70

Answer 2

您的代碼有兩件事是錯誤的

1. 應該是能見度：可見，而不是能見度：0。所以更改它。
2. 永遠不會……在渲染函數中設置狀態，這確實是一種糟糕的做法。

Answer 3

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代碼。 如果您不使用道具，則不必傳遞道具，也不需要在setState中使用return 。