Класс 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'); 

Меняет состояние! Поля "alert" подтверждают путь через код, и ТОЛЬКО setState кажется NOP!

Answer 1

В случае, если вы хотите прочитать значения состояния после его обновления, вы можете использовать второй аргумент метода setState, который является функцией обратного вызова. Эта функция обратного вызова выполняется после обновления состояния и повторной визуализации компонента. Например this.setState({ hidden: !this.state.hidden }, function(){ console.log("updated state: " + this.state.hidden); });

Answer 2

setState является асинхронным, и поэтому вы не сможете увидеть обновления после этого. Вот почему вы не видите актуальное значение на вашем последнем alert вызов.

Для получения дополнительной информации проверьте документацию ReactJs: https://facebook.github.io/react/docs/state-and-lifecycle.html

Я написал пример кода на основе вашего:

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>