Comment utiliser l'opérateur d'incrémentation de Réagir
Pourquoi quand je fais this.setState({count:this.state.count*2}) cela fonctionne mais quand je fais: this.setState({count:this.state.count++}) ça ne marche pas?
Pourquoi, et comment le résoudre?
Code complet:
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')
);
Mais ce code fonctionne:
a:function(){
this.setState({count:this.state.count*2})
console.log(this.state)
},
JSFiddle:https://jsfiddle.net/69z2wepo/55100/
5 réponses
En faisant this.state.count++, Vous muter l'état, parce que c'est la même chose que faire this.state.count += 1. Vous ne devez jamais la mutation de l'état (voir https://facebook.github.io/react/docs/component-api.html). Préférez le faire à la place:
this.setState({ count: this.state.count + 1 })
setState est une fonction async. Réagir peut-lot un tas de setStates ensemble.
Si la valeur de this.state.count est la valeur au moment où vous en faites la demande.
une meilleure solution pour appeler une fonction qui est évaluée au moment où le setState est exécuté.
this.setState((prevState, props) => ({
counter: prevState.counter + 1
}));
https://facebook.github.io/react/docs/state-and-lifecycle.html
setState renvoie la fonction avant this.state.count est incrémenté parce que vous utilisez un opérateur post-fix (++). Aussi,setState est asynchrone, il accepte un callback comme second argument qui est déclenché lorsque l'État a été mis à jour, donc vous devez mettre votre console.log à l'intérieur du disjoncteur.
vous essayez de muter l'état (accédez à ceci.état.champ et d'augmenter sa valeur), c'est ce que ++ est. Il essaie d'augmenter cette valeur d'état, et de l'attribuer à l'état neuf :) jamais muter état en appelant setState. Essayez
this.setState({count: this.state.count+1})
ou
this.setState({(state)=>({count: state.count + 1})}
// nouvelle variable d'État à l'intérieur de la portée de la fonction, nous pouvons jouer avec cela, ++ même en toute sécurité. mais ne l'appelez pas ++ sur ce.état jamais.
En général, n'utilisez pas++, c'est une mauvaise pratique.
Pour de simples les affectations
a+=1 || a-=1 || a*=1 || a%=1
sont meilleurs, ou même les écrivent explicitement.
a = a + 1
j'ai trouvé une solution. Quand je fais this.setState({count:++this.state.count}) c'est le travail.
La raison est que quand je fais this.setState({count:this.state.count++}) la state.count valeur non envoyée à la setState fonction de réaction.