2016-09-04 17 views
7

Warum, wenn ich tue this.setState({count:this.state.count*2}) es funktioniert, aber wenn ich tue: this.setState({count:this.state.count++}) es funktioniert nicht?Wie verwenden Sie den Inkrementoperator in React

Warum und wie es zu beheben?

Voll Code:

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

Aber dieser Code funktioniert:

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

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

Antwort

20

Indem Sie this.state.count++ tun, mutieren Sie den Zustand, weil es das gleiche ist als this.state.count += 1. Sie sollten den Status niemals mutieren (siehe https://facebook.github.io/react/docs/component-api.html). Bevorzugen dass stattdessen zu tun:

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

ja, subtil, aber macht Sinn. Der inkrementelle Operator (++) arbeitet direkt mit dem Zustandswert, also ja, sollte nicht erlaubt sein. Aber nicht offensichtlich. Vielen Dank! – Maniaque

-1

fand ich eine Lösung. Wenn ich tue this.setState({count:++this.state.count}) es funktioniert.

Der Grund ist, wenn ich this.setState({count:this.state.count++}) der neue state.count Wert nicht an die setState React-Funktion gesendet werde.

+0

Sie sollten sich [Anthonys Antwort] (http://stackoverflow.com/a/39316556/3715818) ansehen. Sie sollten Ihren Zustand niemals direkt mutieren und deshalb sollten alle ++ - Operatoren vermieden werden. – rzueger

2

Die Funktion setState wird zurückgegeben, bevor this.state.count inkrementiert wird, da Sie einen post-fix-Operator (++) verwenden. Auch setState ist asynchron, es akzeptiert einen Rückruf als das zweite Argument, das ausgelöst wird, wenn der Status aktualisiert wurde, also sollten Sie Ihre console.log innerhalb der cb setzen.

2

setState ist eine Asynchron-Funktion. Reagieren kann eine Reihe von setState s zusammen chargen. Also der Wert von this.state.count ist der Wert zu dem Zeitpunkt, an dem Sie die Anfrage stellen.

Eine bessere Lösung zum Aufruf einer Funktion, die zum Zeitpunkt der Ausführung von setState ausgewertet wird.

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

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

0

Sie versuchen Staat zu mutieren (Zugang this.state.field und ihren Wert steigern) das ist, was ++ ist. Es versucht, diesen Statuswert zu erhöhen und dann dem neuen Status zuzuweisen :) Ändere den Status nur durch Aufruf von setState. Versuchen

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

oder

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

// neue Zustandsvariablen innerhalb Anwendungsbereich der Funktion können wir damit spielen ++, auch sicher. aber rufe niemals diesen Zustand an. Verwenden Sie im Allgemeinen nicht ++, es ist eine schlechte Übung.
Für einfache Zuordnungen

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

besser sind, oder sie sogar explizit schreiben.

a = a + 1 
Verwandte Themen