Jak korzystać z operatora inkrementacji w React

Question

Dlaczego kiedy robię this.setState({count:this.state.count*2}) to działa, ale kiedy robię: this.setState({count:this.state.count++}) to nie działa?

Dlaczego i jak go naprawić?

Pełny kod:

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') 
); 

Ale ten kod działa:

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

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

Answer 1

Wykonując this.state.count++, mutujesz stan, ponieważ jest to to samo, co wykonanie this.state.count += 1. Nigdy nie należy mutować stanu (patrz https://facebook.github.io/react/docs/component-api.html). Wolę to zrobić w zamian:

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

Answer 2

znalazłem rozwiązanie. Kiedy robię this.setState({count:++this.state.count}) to działa.

Powodem jest, gdy robię this.setState({count:this.state.count++}) funkcję nowa state.count wartość nie zostanie wysłany do setState React.

Answer 3

Funkcja setState powraca przed this.state.count jest zwiększana, ponieważ używasz operatora post-fix (++). Ponadto, setState jest asynchroniczny, akceptuje wywołanie zwrotne jako drugi argument, który jest wyzwalany, gdy stan został zaktualizowany, więc powinieneś umieścić swoją console.log wewnątrz cb.

Answer 4

setState jest funkcja asynchroniczny. React może grupować razem setState. Tak więc wartość this.state.count jest wartością w momencie składania żądania.

Lepsze rozwiązanie do wywołania funkcji, która zostanie oceniona w momencie wykonania setState.

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

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

Answer 5

Próbujesz mutować stanu (dostęp this.state.field i zwiększać swoją wartość) to co ++ jest. Próbuje zwiększyć tę wartość stanu, a następnie przypisać ją do nowego stanu :) Zawsze mutować stan, wywołując setState. Spróbuj

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

lub

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

// nową zmienną stanu wewnątrz zakresu funkcję, możemy grać z tym, ++ nawet bezpiecznie. ale nie dzwoń ++ na this.state ever. Ogólnie, nie używaj ++, to jest zła praktyka.
przypadku prostych zadań

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

są lepsze, a nawet zapisać je wyraźnie.

a = a + 1