this.setState führt Zustände nicht wie erwartet zusammen

Unveränderlichkeit Helfer wurden vor kurzem Hinzugefügt, um zu Reagieren.addons, so dass Sie nun so etwas wie:

var newState = React.addons.update(this.state, {
  selected: {
    name: { $set: 'Barfoo' }
  }
});
this.setState(newState);

Unveränderlichkeit Helfer-Dokumentation:
http://facebook.github.io/react/docs/update.html

InformationsquelleAutor der Antwort user3874611

Wollte ich nicht installieren, die andere Bibliothek hier ist also noch eine andere Lösung.

Statt:

this.setState({ selected: { name: 'Barfoo' }});

Tun Sie dies:

var newSelected = Object.assign({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });

Oder, Dank @icc97 in den Kommentaren, noch prägnanter aber wohl weniger lesbar:

this.setState({ selected: Object.assign({}, this.state.selected, { name: "Barfoo" }) });

Auch, klar zu sein, dass diese Antwort nicht gegen die Bedenken, die @bgannonpl oben erwähnt.

InformationsquelleAutor der Antwort Ryan Shillington

Meine Lösung für diese Art von situation zu verwenden ist, wie eine andere Antwort darauf hingewiesen, die Unveränderlichkeit Helfer.

Seit Einstellung des Staates in der Tiefe ist eine Häufig auftretende situation, die ich angelegt habe folgende mixin:

var SeStateInDepthMixin = {
   setStateInDepth: function(updatePath) {
       this.setState(React.addons.update(this.state, updatePath););
   }
};

Dieses mixin ist für die meisten meiner Komponenten und ich in der Regel verwenden Sie nicht setState mehr direkt.

Mit dieser mixin, alles, was Sie tun müssen, um die gewünschte Wirkung erzielen, ist der Aufruf der Funktion setStateinDepth in der folgenden Weise:

setStateInDepth({ selected: { name: { $set: 'Barfoo' }}})

Weitere Informationen:

• Wie Mixins in Verbindung arbeiten Reagieren, sehen die offizielle Dokumentation
• Auf die syntax der übergebenen parameter setStateinDepth siehe die Unveränderlichkeit Helfer Dokumentation.

InformationsquelleAutor der Antwort Dorian

Ich bin mit es6-Klassen, und ich endete mit mehreren komplexen Objekten sind auf meiner top-Zustand und wurde versucht zu machen, meine wichtigsten Komponente mehr modular, also habe ich eine einfache wrapper-Klasse zu halten, dem Staat auf der obersten Komponente, sondern erlauben weitere lokale Logik.

Wrapper-Klasse nimmt eine Funktion als Konstruktor, setzt eine Eigenschaft auf die Hauptkomponente Zustand.

export default class StateWrapper {

    constructor(setState, initialProps = []) {
        this.setState = props => {
            this.state = {...this.state, ...props}
            setState(this.state)
        }
        this.props = initialProps
    }

    render() {
        return(<div>render() not defined</div>)
    }

    component = props => {
        this.props = {...this.props, ...props}
        return this.render()
    }
}

Dann für jedes komplexe Eigenschaft, die auf der top-Zustand, erstelle ich eine StateWrapped Klasse. Sie können den Standard-Requisiten im Konstruktor hier, und Sie wird gesetzt, wenn die Klasse initialisiert ist, können Sie sich an die lokalen Staates für die Werte und den lokalen Zustand finden Sie lokale Funktionen, und es ging, bis die Kette:

class WrappedFoo extends StateWrapper {

    constructor(...props) { 
        super(...props)
        this.state = {foo: "bar"}
    }

    render = () => <div onClick={this.props.onClick||this.onClick}>{this.state.foo}</div>

    onClick = () => this.setState({foo: "baz"})


}

Dann also meine top-level-Komponente benötigt nur den Konstruktor, um jede Klasse zu top-level state-Eigenschaft, eine einfache Wiedergabe und alle Funktionen, die die Kommunikation cross-Komponente.

class TopComponent extends React.Component {

    constructor(...props) {
        super(...props)

        this.foo = new WrappedFoo(
            props => this.setState({
                fooProps: props
            }) 
        )

        this.foo2 = new WrappedFoo(
            props => this.setState({
                foo2Props: props
            }) 
        )

        this.state = {
            fooProps: this.foo.state,
            foo2Props: this.foo.state,
        }

    }

    render() {
        return(
            <div>
                <this.foo.component onClick={this.onClickFoo} />
                <this.foo2.component />
            </div>
        )
    }

    onClickFoo = () => this.foo2.setState({foo: "foo changed foo2!"})
}

Scheint zu funktionieren ziemlich gut für meine Zwecke, bear in Verstand, obwohl Sie nicht ändern können, den Zustand der Eigenschaften, die Sie zuordnen gewickelt Komponenten auf der obersten Ebene Komponente als jede gewickelt-Komponente ist die Verfolgung des eigenen Staates, sondern die Aktualisierung der Staat auf die erste Komponente jedes mal, wenn es änderungen.

InformationsquelleAutor der Antwort

haben Sie den ursprünglichen Zustand?

Werde ich einige von meinen eigenen code für Beispiel:

    getInitialState: function () {
        return {
            dragPosition: {
                top  : 0,
                left : 0
            },
            editValue : "",
            dragging  : false,
            editing   : false
        };
    }

In einer app an der ich arbeite, das ist, wie ich habe bereits die Einstellung und die Verwendung von state. Ich glaube, auf setState dann können Sie nur Bearbeiten, was besagt Sie möchten individuell ich habe nannte es so:

    onChange: function (event) {
        event.preventDefault();
        event.stopPropagation();
        this.setState({editValue: event.target.value});
    },

Halten Sie im Verstand, den Sie haben, um den Status innerhalb der React.createClass Funktion, die Sie aufgerufen haben getInitialState

InformationsquelleAutor der Antwort asherrard