Как использовать оператор инкремента в React

Question

Почему, когда я делаю this.setState({count:this.state.count*2}), он работает, но когда я делаю: this.setState({count:this.state.count++}) он не работает?

Почему и как его исправить?

Полный код:

var Hello = React.createClass({ 
    getInitialState:function(){ 
    return {count:parseInt(this.props.count)} 
    }, 
    a:function(){ 
    this.setState({count:this.state.count++}) 
    console.log(this.state) 
    }, 
    render: function() { 
    console.log(this.state) 
    return <div onClick={this.a}>Click to increment the counter<b> {this.state.count} </b></div>; 
    } 
}); 

ReactDOM.render(
    <Hello count="1" />, 
    document.getElementById('container') 
); 

Но этот код работает:

a:function(){ 
    this.setState({count:this.state.count*2}) 
    console.log(this.state) 
    }, 

JSFiddle: https://jsfiddle.net/69z2wepo/55100/

Answer 1

Выполняя this.state.count++, вы мутируете состояние, потому что это то же самое, что и делать this.state.count += 1. Вы никогда не должны мутировать состояние (см. https://facebook.github.io/react/docs/component-api.html). Предпочитаю делать это вместо:

this.setState({ count: this.state.count + 1 }) 

Answer 2

Я нашел решение. Когда я делаю this.setState({count:++this.state.count}), он работает.

Причина в том, что я делаю this.setState({count:this.state.count++}) новое значение state.count, которое не отправляется на setState Реагент.

Answer 3

Функция возвращает this.state.count, потому что вы используете пост-исправный оператор (++). Кроме того, setState является асинхронным, он принимает обратный вызов в качестве второго аргумента, который запускается при обновлении состояния, поэтому вы должны поместить свой console.log внутри cb.

Answer 4

setState является функцией асинхронной. Реакция может содержать пучок setState s вместе. Значением this.state.count является значение на момент подачи запроса.

Лучшее решение для вызова функции, которая оценивается во время выполнения setState.

this.setState((prevState, props) => ({ 
    counter: prevState.counter + 1 
})); 

https://facebook.github.io/react/docs/state-and-lifecycle.html из

Answer 5

Вы пытаетесь мутировать состояние (this.state.field доступа и увеличить свою ценность), это то, что ++ есть. Он пытается увеличить это значение состояния, а затем назначить его новому состоянию :) Только когда-либо мутируйте состояние, вызвав setState. Попробуйте

this.setState({count: this.state.count+1}) 

или

this.setState({(state)=>({count: state.count + 1})} 

// новое состояние переменной внутри сферы функция, мы можем играть с этим, ++ даже безопасно. но не вызывайте ++ на this.state. В общем, не используйте ++, это плохая практика.
Для простых заданий

a+=1 || a-=1 || a*=1 || a%=1 

лучше, или даже записать их в явном виде.

a = a + 1