Mam następujący stan:

this.setState({ selected: { id: 1, name: 'Foobar' } });  

Następnie aktualizuję stan:

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

Ponieważ setStatema nastąpić scalenie, spodziewałbym się, że będzie to:

{ selected: { id: 1, name: 'Barfoo' } }; 

Ale zamiast tego zjada identyfikator, a stan to:

{ selected: { name: 'Barfoo' } }; 

Czy to oczekiwane zachowanie i jakie jest rozwiązanie polegające na aktualizowaniu tylko jednej właściwości zagnieżdżonego obiektu stanu?

Myślę, że setState()nie wykonuje scalania rekurencyjnego.

Możesz użyć wartości bieżącego stanu, this.state.selectedaby utworzyć nowy stan, a następnie wywołać setState()to:

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

Użyłem tutaj funkcji _.extend()funkcji (z biblioteki underscore.js), aby zapobiec modyfikowaniu istniejącej selectedczęści stanu poprzez utworzenie jej płytkiej kopii.

Innym rozwiązaniem byłoby napisanie, setStateRecursively()które dokonuje rekursywnego scalania w nowym stanie, a następnie wywołuje replaceState()z nim:

setStateRecursively: function(stateUpdate, callback) {
  var newState = mergeStateRecursively(this.state, stateUpdate);
  this.replaceState(newState, callback);
}

Pomocnicy niezmienności zostali niedawno dodani do React.addons, więc dzięki temu możesz teraz zrobić coś takiego:

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

Dokumentacja pomocników niezmienności .

Ponieważ wiele odpowiedzi wykorzystuje bieżący stan jako podstawę do scalania nowych danych, chciałem zwrócić uwagę, że może to się zepsuć. Zmiany stanu są umieszczane w kolejce i nie powodują natychmiastowej modyfikacji obiektu stanu składnika. Odwołanie się do danych stanu przed przetworzeniem kolejki da zatem nieaktualne dane, które nie odzwierciedlają oczekujących zmian wprowadzonych w setState. Z dokumentów:

setState () nie zmienia natychmiast this.state, ale tworzy oczekującą zmianę stanu. Dostęp do this.state po wywołaniu tej metody może potencjalnie zwrócić istniejącą wartość.

Oznacza to, że używanie „bieżącego” stanu jako odniesienia w kolejnych wywołaniach funkcji setState jest zawodne. Na przykład:

1. Pierwsze wywołanie setState, kolejkowanie zmiany do obiektu stanu
2. Drugie wywołanie setState. Twój stan używa obiektów zagnieżdżonych, więc chcesz wykonać scalenie. Przed wywołaniem setState otrzymujesz obiekt stanu bieżącego. Ten obiekt nie odzwierciedla umieszczonych w kolejce zmian dokonanych w pierwszym wywołaniu metody setState powyżej, ponieważ jest to nadal oryginalny stan, który powinien być teraz uważany za „nieaktualny”.
3. Wykonaj scalanie. Rezultatem jest oryginalny „nieaktualny” stan plus nowe dane, które właśnie ustawiłeś, zmiany z początkowego wywołania setState nie są odzwierciedlane. Twoje wywołanie setState kolejkuje po tej drugiej zmianie.
4. Reaguj kolejkę procesów. Pierwsze wywołanie setState jest przetwarzane, aktualizowanie stanu. Drugie wywołanie setState jest przetwarzane, aktualizując stan. Drugi obiekt setState zastąpił teraz pierwszy, a ponieważ dane, które miałeś podczas wykonywania tego wywołania, były nieaktualne, zmodyfikowane nieaktualne dane z tego drugiego wywołania spowodowały utratę zmian dokonanych w pierwszym wywołaniu.
5. Gdy kolejka jest pusta, React określa, czy renderować itd. W tym momencie wyrenderujesz zmiany dokonane w drugim wywołaniu setState i będzie to tak, jakby pierwsze wywołanie setState nigdy nie miało miejsca.

Jeśli potrzebujesz użyć bieżącego stanu (np. Aby scalić dane w zagnieżdżony obiekt), setState alternatywnie akceptuje funkcję jako argument zamiast obiektu; funkcja jest wywoływana po wszelkich poprzednich aktualizacjach stanu i przekazuje stan jako argument - można to więc wykorzystać do wprowadzenia atomowych zmian gwarantujących uwzględnienie poprzednich zmian.

Nie chciałem instalować kolejnej biblioteki, więc oto kolejne rozwiązanie.

Zamiast:

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

Zrób to zamiast tego:

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

Lub, dzięki @ icc97 w komentarzach, jeszcze bardziej zwięźle, ale prawdopodobnie mniej czytelnie:

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

Ponadto, aby było jasne, ta odpowiedź nie narusza żadnego z obaw, o których @bgannonpl wspomniał powyżej.

Zachowanie poprzedniego stanu na podstawie odpowiedzi @bgannonpl:

Przykład Lodash :

this.setState((previousState) => _.merge({}, previousState, { selected: { name: "Barfood"} }));

Aby sprawdzić, czy działa poprawnie, możesz użyć wywołania zwrotnego funkcji drugiego parametru:

this.setState((previousState) => _.merge({}, previousState, { selected: { name: "Barfood"} }), () => alert(this.state.selected));

Użyłem, mergeponieważ extendw przeciwnym razie odrzuca inne właściwości.

Przykład niezmienności reakcji :

import update from "react-addons-update";

this.setState((previousState) => update(previousState, {
    selected:
    { 
        name: {$set: "Barfood"}
    }
});

Moim rozwiązaniem tego rodzaju sytuacji jest użycie, tak jak wskazała inna odpowiedź, pomocników niezmienności .

Ponieważ ustawienie stanu dogłębnego jest powszechną sytuacją, stworzyłem następującą mieszankę:

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

Ta mieszanka jest zawarta w większości moich składników i generalnie nie używam setStatejuż bezpośrednio.

Dzięki takiemu miksowi wszystko, co musisz zrobić, aby osiągnąć pożądany efekt, to wywołać funkcję setStateinDepthw następujący sposób:

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

Po więcej informacji:

• Aby dowiedzieć się, jak działają miksy w Reakcie, zobacz oficjalną dokumentację
• Na składni przekazanego parametru, aby setStateinDepthzobaczyć dokumentację Immutability Helpers .

Używam klas es6 i skończyłem z kilkoma złożonymi obiektami na moim najwyższym stanie i próbowałem uczynić mój główny komponent bardziej modułowym, więc stworzyłem prostą otokę klasy, aby zachować stan na najwyższym komponencie, ale pozwolić na bardziej lokalną logikę .

Klasa opakowująca przyjmuje funkcję jako konstruktor, która ustawia właściwość stanu głównego składnika.

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()
    }
}

Następnie dla każdej złożonej właściwości w stanie głównym tworzę jedną klasę StateWrapped. Możesz tutaj ustawić domyślne właściwości w konstruktorze, które zostaną ustawione, gdy klasa zostanie zainicjowana, możesz odwołać się do stanu lokalnego w celu uzyskania wartości i ustawić stan lokalny, odwołać się do funkcji lokalnych i przekazać je do łańcucha:

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"})


}

Więc mój komponent najwyższego poziomu potrzebuje tylko konstruktora, aby ustawić każdą klasę na jej właściwość stanu najwyższego poziomu, proste renderowanie i wszelkie funkcje, które komunikują się między komponentami.

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!"})
}

Wydaje się, że do moich celów działa całkiem nieźle, pamiętaj, że nie możesz zmienić stanu właściwości przypisanych do opakowanych komponentów w komponencie najwyższego poziomu, ponieważ każdy opakowany komponent śledzi swój własny stan, ale aktualizuje stan w górnym komponencie za każdym razem, gdy się zmienia.

W tej chwili,

Jeśli następny stan zależy od poprzedniego, zalecamy zamiast tego użyć formularza funkcji aktualizatora:

zgodnie z dokumentacją https://reactjs.org/docs/react-component.html#setstate , używając:

this.setState((prevState) => {
    return {quantity: prevState.quantity + 1};
});

Rozwiązanie

Edycja: To rozwiązanie używane do używania składni rozkładów . Celem było stworzenie obiektu bez żadnych odniesień prevState, aby prevStatenie był modyfikowany. Ale w moim użyciu prevStateczasami wydawał się modyfikowany. Tak więc, aby uzyskać doskonałe klonowanie bez skutków ubocznych, teraz konwertujemy prevStatena JSON, a potem z powrotem. (Inspiracja do korzystania z formatu JSON pochodzi z MDN ).

Zapamiętaj:

• Aktualizacje stanu są płytkie : obejmują tylko jeden poziom
• Stan nie powinien być bezpośrednio mutowany . Zamiast tego użyjsetState(prevState => stateChange)

Kroki

1. Zrób kopię własności korzeń szczebla o statektóre chcesz zmienić
2. Zmutuj ten nowy obiekt
3. Utwórz obiekt aktualizacji
4. Zwróć aktualizację

Kroki 3 i 4 można łączyć w jednej linii.

Przykład

this.setState(prevState => {
    var newSelected = JSON.parse(JSON.stringify(prevState.selected)) //1
    newSelected.name = 'Barfoo'; //2
    var update = { selected: newSelected }; //3
    return update; //4
});

Uproszczony przykład:

this.setState(prevState => {
    var selected = JSON.parse(JSON.stringify(prevState.selected)) //1
    selected.name = 'Barfoo'; //2
    return { selected }; //3, 4
});

Jest to zgodne z wytycznymi React. Na podstawie odpowiedzi Eicksla na podobne pytanie.

Rozwiązanie ES6

Stan początkowo ustawiamy

this.setState({ selected: { id: 1, name: 'Foobar' } }); 
//this.state: { selected: { id: 1, name: 'Foobar' } }

Zmieniamy właściwość na pewnym poziomie obiektu stanu:

const { selected: _selected } = this.state
const  selected = { ..._selected, name: 'Barfoo' }
this.setState({selected})
//this.state: { selected: { id: 1, name: 'Barfoo' } }

Stan React nie wykonuje scalania rekurencyjnego, setStatepodczas gdy oczekuje, że w tym samym czasie nie będą dostępne lokalne aktualizacje elementu członkowskiego. Musisz albo samodzielnie skopiować zamknięte obiekty / tablice (za pomocą array.slice lub Object. assign), albo skorzystaj z dedykowanej biblioteki.

Jak ten. NestedLink bezpośrednio obsługuje obsługę złożonego stanu reakcji .

this.linkAt( 'selected' ).at( 'name' ).set( 'Barfoo' );

Ponadto łącze do selectedlub selected.namemożna przekazać wszędzie jako pojedynczy element i zmodyfikować tam za pomocą set.

czy ustawiłeś stan początkowy?

Użyję własnego kodu, na przykład:

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

W aplikacji, nad którą pracuję, tak ustawiam i używam stanu. Wierzę, setStateże możesz wtedy po prostu edytować dowolne stany indywidualnie.Nazywałem to tak:

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

Pamiętaj, że musisz ustawić stan w React.createClasswywołanej funkcjigetInitialState

Używam tmp var do zmiany.

changeTheme(v) {
    let tmp = this.state.tableData
    tmp.theme = v
    this.setState({
        tableData : tmp
    })
}