反应状态变化不会导致重新渲染答案

【问题标题】：React state change not causing re-render反应状态变化不会导致重新渲染
【发布时间】：2019-03-07 02:56:06
【问题描述】：

我试图在单击单独的 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;

【问题讨论】：

标签： javascript html css reactjs state

【解决方案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

【讨论】：

【解决方案2】：

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 的代码。不使用任何props就不必传递，setState中也不需要使用return。

【讨论】：

【解决方案3】：

你的代码有两个问题

应该是可见性：可见而不是可见性：0。所以改变它。
从来没有...在渲染函数中设置状态，真的很糟糕。

【讨论】：