React类：setState什么都不做（也没有报告错误）[重复]

Question

我有一个使用此构造函数的React类：

class AddList extends Component {
constructor(props){
  super(props);
  this.state = { hidden: true };
}

那么我有这个功能：

handleSubmit(e) {
e.preventDefault(); // this prevents the page from reloading -- do not     delete this line!

// Implement the rest of this function here!
alert('this.state.hidden: ' + this.state.hidden);
if (this.state.hidden == true){
  alert('setting hidden to false');
  this.setState({hidden: false});
  }
  else{
    alert('setting hidden to true');
    this.setState({hidden: true});
  }
alert('this.state.hidden: ' + this.state.hidden);
    . . . 

My problem is that neither this.setState({hidden: false);
nor                        this.setState({hidden: 'false'); 

改变状态！“警报”框确认通过代码的路径，只有“设置状态”似乎是NOP！

Answer 1

如果您想在更新后读取状态值，您可以使用setState方法的第二个参数，这是一个回调函数。此回调函数在状态更新和组件重新呈现后执行。this.set状态（{隐藏：！this.state.hidden}，函数（）{console.log（"更新状态："this.state.hidden ); });

Answer 2

setState是异步的，因此您以后将无法看到更新。这就是为什么您在上一次调用警报时看不到最新值的原因。

有关更多信息，请查看ReactJs的文档：https://facebook.github.io/react/docs/state-and-lifecycle.html#using-正确陈述

我写了一个基于你的示例代码：

class AddList extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = { hidden: true }
    
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  
  handleSubmit(event) {
    event.preventDefault()
    
    this.setState({ hidden: !this.state.hidden })
  }
  
  render() {
    return (
      <div>
        <div>State value: {this.state.hidden ? 'hidden' : 'visible'}</div>
        <button onClick={this.handleSubmit}>Click-me</button>
      </div>
    )
  }
 }
 
 ReactDOM.render(<AddList />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>