Warum wird der state Wert nicht addiert in React?

[ebody]

Hallo,

hier habe ich ein einfaches Beispiel. this.state.intBudget soll um bestimmte Zahlen addiert werden. Hier würde das 3x passieren. this.state.intBudget enthält am Ende aber nur den Wert, der zuletzt zugefügt wurde. Der Wert wurde nicht zum zuvor geänderten Wert hinzu addiert. Ich verstehe nicht warum nicht?

Gruß ebody

[Raketenwilli]

Hat sich wohl erledigt? In Deinem Codepen steigt der Wert aktuell mit jedem Click UM 400. Das steht im Widerspruch zu Deiner Aussage „this.state.intBudget enthält am Ende aber nur den Wert, der zuletzt zugefügt wurde.“

[Raketenwilli]

Ok. Jetzt hab ich mal die Werte ("a":+100 | "b"+200 | "c" + 400) angepasst um eine eindeutige Aussage zu bekommen.

• Es werden also die Fälle „a“,„b“ und „c" abgearbeitet. Dieses widersinniger Weise in einer Schleife, die dann per case eben diese Flle unterscheidet. (Wer, bitte, macht denn sowas?)

Aber in der Webseite wirksam wird nur der Fall „c". Grund ist ganz stumpf, dass in der Zeile

this.setState( { intBudget: this.state.intBudget + intAmount } );

in allen drei Fällen der Wert aus der Webseite vor dem „Click“ benutzt wird.

Du kannst Dich davon überzeugen, in dem Du hinter jedes case "[a|b|c]":

einfach

console.log( this.state.intBudget );

notierst.

Möglicherweise willst Du das

ReactDOM.render( <App />, document.getElementById("root") );

in die cases aufnehmen. Oder das Jahr 2000 nach einer Variable rufen hören.

(Und ich hab wieder mal gesehen, welch verdammt guten Grund ich habe, derlei Zeug nicht verwenden zu wollen.)

[Random2356]

Möglicherweise willst Du das

ReactDOM.render( <App />, document.getElementById("root") );

in die cases aufnehmen.

Was soll das bringen, erklär mal! Oder ist das nur ahnungslose Wichtigtuerei?

[Raketenwilli]

Möglicherweise willst Du das

ReactDOM.render( <App />, document.getElementById("root") );

in die cases aufnehmen.

Was soll das bringen, erklär mal!

Ich hatte zwei Vorschläge gemacht, die das Problem möglicherweise lösen können. Den Zweiten hat Ebody erfolgreich angewendet - oder er kam zwischenzeitlich selbst auf die Idee.

Oder ist das nur ahnungslose Wichtigtuerei?

DAS ist genau DAS. Du kannst Deinen „Beitrag“ selbst mit dem Grund melden, dieser sei unkonstruktiv (zur Sache hast Du gar nichts beigtragen) und provokativ (wenn Dir sowas öfter passiert, dann gehe mal zum Psychologe), trage zu einer Verschlechterung der Stimmung bei.

[Random2356]

Möglicherweise willst Du das

ReactDOM.render( <App />, document.getElementById("root") );

in die cases aufnehmen.

Was soll das bringen, erklär mal!

Ich hatte zwei Vorschläge gemacht, die das Problem möglicherweise lösen können. Den Zweiten hat Ebody erfolgreich angewendet - oder er kam zwischenzeitlich selbst auf die Idee.

Nein, ernsthaft: Ich kenne mich mit Class Components nicht aus, weil ich bei React immer nur Functional Components verwende. Ich bin wirklich an der Erklärung interessiert, was Dein oben genannter Vorschlag bewirken soll.

[Raketenwilli]

Ich bin wirklich an der Erklärung interessiert, was Dein oben genannter Vorschlag bewirken soll.

Ich bin klug genug um genau zu wissen, dass Du das behauptete Interesse gerade nicht verfolgst.

[Rolf B]

Hallo Raketenwilli,

ich mach das jetzt genau hier zu - nicht weil Du unkonstruktiv bist, sondern damit Du gezielt antworten kannst falls Du noch Lust auf eine Antwort hast.

Rolf

[ebody]

Hi, habe die Lösung.

Ich addiere die Beträge erstmal in einer lokalen Variable und erst nach der Schleife ändere ich den state Wert.

Gruß ebody

[Random2356]

Der Vollständigkeit halber: Du könntest den State durchaus direkt in den Cases der Switch-Anweisung ändern. Wie auf der vom Linksetzer verlinkten Seite beschrieben, müsste die handle-Funktion mit der angepassten setState-Anweisung dann so aussehen:

handle = () => {
    for (let val of ['a','b','c']) {
        let intAmount = 0;
        switch (val) {
          case "a":
            intAmount = 200;
            this.setState((state) => ({
                intBudget: state.intBudget + intAmount
            }));
            console.log(val);
            break;
          case "b":
            intAmount = 300;
            this.setState((state) => ({
                intBudget: state.intBudget + intAmount
            }));
            console.log(val);
            break;
          case "c":
            intAmount = 400;
            this.setState((state) => ({
                intBudget: state.intBudget + intAmount
            }));
            console.log(val);
            break;
          default:
            console.log("Default");
        }
      }

[Linksetzer]

Using State Correctly