Ich versuche, meinen Status mithilfe einer verschachtelten Eigenschaft wie folgt zu organisieren:

this.state = {
   someProperty: {
      flag:true
   }
}

Aber den Status so aktualisieren,

this.setState({ someProperty.flag: false });

funktioniert nicht Wie kann das richtig gemacht werden?

Um setStateein verschachteltes Objekt zu erhalten, können Sie den folgenden Ansatz verfolgen, da setState meiner Meinung nach keine verschachtelten Aktualisierungen verarbeitet.

var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})

Die Idee ist, ein Dummy-Objekt zu erstellen, Operationen daran auszuführen und dann den Status der Komponente durch das aktualisierte Objekt zu ersetzen

Jetzt erstellt der Spread-Operator nur eine verschachtelte Kopie des Objekts auf einer Ebene. Wenn Ihr Bundesstaat stark verschachtelt ist wie:

this.state = {
   someProperty: {
      someOtherProperty: {
          anotherProperty: {
             flag: true
          }
          ..
      }
      ...
   }
   ...
}

Sie können setState mit dem Spread-Operator auf jeder Ebene wie setzen

this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        someOtherProperty: {
            ...prevState.someProperty.someOtherProperty, 
            anotherProperty: {
               ...prevState.someProperty.someOtherProperty.anotherProperty,
               flag: false
            }
        }
    }
}))

Die obige Syntax wird jedoch immer hässlicher, wenn der Status immer verschachtelter wird. Daher empfehle ich Ihnen, das immutability-helperPaket zum Aktualisieren des Status zu verwenden.

In dieser Antwort erfahren Sie, wie Sie den Status aktualisieren immutability helper.

Um es in einer Zeile zu schreiben

this.setState({ someProperty: { ...this.state.someProperty, flag: false} });

Manchmal sind direkte Antworten nicht die besten :)

Kurzfassung:

dieser Code

this.state = {
    someProperty: {
        flag: true
    }
}

sollte als so etwas vereinfacht werden

this.state = {
    somePropertyFlag: true
}

Lange Version:

Derzeit sollten Sie nicht mit dem verschachtelten Status in React arbeiten möchten . Da React nicht darauf ausgerichtet ist, mit verschachtelten Zuständen zu arbeiten, sehen alle hier vorgeschlagenen Lösungen als Hacks aus. Sie nutzen das Framework nicht, sondern kämpfen damit. Sie schlagen vor, nicht so klaren Code zu schreiben, um einige Eigenschaften zweifelhaft zu gruppieren. Sie sind als Antwort auf die Herausforderung sehr interessant, aber praktisch nutzlos.

Stellen wir uns folgenden Zustand vor:

{
    parent: {
        child1: 'value 1',
        child2: 'value 2',
        ...
        child100: 'value 100'
    }
}

Was passiert, wenn Sie nur einen Wert von ändern child1? React rendert die Ansicht nicht erneut, da ein flacher Vergleich verwendet wird und festgestellt wird, dass sich die parentEigenschaft nicht geändert hat. Übrigens wird das direkte Mutieren des Zustandsobjekts im Allgemeinen als schlechte Praxis angesehen.

Sie müssen also das gesamte parentObjekt neu erstellen . In diesem Fall werden wir jedoch auf ein anderes Problem stoßen. React wird denken, dass alle Kinder ihre Werte geändert haben und sie alle neu rendern. Natürlich ist es nicht gut für die Leistung.

Es ist immer noch möglich, dieses Problem durch Schreiben einer komplizierten Logik zu lösen, shouldComponentUpdate()aber ich würde es vorziehen, hier anzuhalten und eine einfache Lösung aus der Kurzversion zu verwenden.

Haftungsausschluss

Verschachtelter Zustand in Reaktion ist falsches Design

Lesen Sie diese ausgezeichnete Antwort .

Begründung für diese Antwort:

Der setState von React ist nur ein integrierter Komfort, aber Sie werden schnell feststellen, dass er seine Grenzen hat. Durch die Verwendung benutzerdefinierter Eigenschaften und die intelligente Verwendung von forceUpdate erhalten Sie viel mehr. z.B:

class MyClass extends React.Component {
    myState = someObject
    inputValue = 42
...

MobX beispielsweise gibt den Status vollständig aus und verwendet benutzerdefinierte beobachtbare Eigenschaften.
Verwenden Sie in React-Komponenten Observables anstelle von state.

die Antwort auf Ihr Elend - siehe Beispiel hier

Es gibt eine andere kürzere Möglichkeit, verschachtelte Eigenschaften zu aktualisieren.

this.setState(state => {
  state.nested.flag = false
  state.another.deep.prop = true
  return state
})

In einer Zeile

 this.setState(state => (state.nested.flag = false, state))

_{Hinweis: Dies hier ist der Komma-Operator ~ MDN . Sehen Sie ihn hier in Aktion (Sandbox) .}

Es ist ähnlich (obwohl dies die Zustandsreferenz nicht ändert)

this.state.nested.flag = false
this.forceUpdate()

_{Für den subtilen Unterschied in diesem Zusammenhang zwischen forceUpdateund setStatesiehe das verknüpfte Beispiel.}

Natürlich missbraucht dies einige Kernprinzipien, da statediese schreibgeschützt sein sollten, aber da Sie den alten Zustand sofort verwerfen und durch einen neuen Zustand ersetzen, ist dies völlig in Ordnung.

Warnung

Auch wenn die Komponente den Zustand enthält , wird aktualisiert und rerender richtig ( mit Ausnahme dieser Gotcha ) , werden die Requisiten nicht auf Kinder zu verbreiten (siehe Spymaster Kommentar unten) . Verwenden Sie diese Technik nur, wenn Sie wissen, was Sie tun.

Beispielsweise können Sie eine geänderte flache Requisite übergeben, die aktualisiert und problemlos übergeben werden kann.

render(
  //some complex render with your nested state
  <ChildComponent complexNestedProp={this.state.nested} pleaseRerender={Math.random()}/>
)

Jetzt, obwohl sich die Referenz für complexNestedProp nicht geändert hat ( shouldComponentUpdate )

this.props.complexNestedProp === nextProps.complexNestedProp

Die Komponente wird bei jeder Aktualisierung der übergeordneten Komponente erneut gerendert, was nach dem Aufruf this.setStateoder this.forceUpdateim übergeordneten Element der Fall ist .

Auswirkungen der Mutation des Staates

Die Verwendung eines verschachtelten Status und die direkte Mutation des Status ist gefährlich, da verschiedene Objekte möglicherweise (absichtlich oder nicht) unterschiedliche (ältere) Verweise auf den Status enthalten und nicht unbedingt wissen, wann sie aktualisiert werden müssen (z. B. wenn sie verwendet werden PureComponentoder wenn shouldComponentUpdatesie für die Rückgabe implementiert sind false) ODER sind soll alte Daten wie im folgenden Beispiel anzeigen.

Stellen Sie sich eine Zeitleiste vor, die historische Daten rendern soll. Wenn Sie die Daten unter der Hand mutieren, führt dies zu unerwartetem Verhalten, da auch vorherige Elemente geändert werden.

Wie auch immer, hier können Sie sehen, dass Nested PureChildClasses nicht neu gerendert wurde, weil Requisiten sich nicht verbreiten konnten.

Wenn Sie ES2015 verwenden, haben Sie Zugriff auf die Object.assign. Sie können es wie folgt verwenden, um ein verschachteltes Objekt zu aktualisieren.

this.setState({
  someProperty: Object.assign({}, this.state.someProperty, {flag: false})
});

Sie führen die aktualisierten Eigenschaften mit den vorhandenen zusammen und verwenden das zurückgegebene Objekt, um den Status zu aktualisieren.

Bearbeiten: Der Zuweisungsfunktion wurde ein leeres Objekt als Ziel hinzugefügt, um sicherzustellen, dass der Status nicht direkt mutiert wird, wie Carkod hervorhob.

const newState = Object.assign({}, this.state);
newState.property.nestedProperty = "new value";
this.setState(newState);

Es gibt viele Bibliotheken, die dabei helfen. Zum Beispiel mit Unveränderlichkeitshelfer :

import update from 'immutability-helper';

const newState = update(this.state, {
  someProperty: {flag: {$set: false}},
};
this.setState(newState);

Mit lodash / fp set:

import {set} from 'lodash/fp';

const newState = set(["someProperty", "flag"], false, this.state);

Verwenden von lodash / fp merge:

import {merge} from 'lodash/fp';

const newState = merge(this.state, {
  someProperty: {flag: false},
});

Wir verwenden Immer https://github.com/mweststrate/immer , um diese Art von Problemen zu behandeln.

Ersetzen Sie einfach diesen Code in einer unserer Komponenten

this.setState(prevState => ({
   ...prevState,
        preferences: {
            ...prevState.preferences,
            [key]: newValue
        }
}));

Mit diesem

import produce from 'immer';

this.setState(produce(draft => {
    draft.preferences[key] = newValue;
}));

Mit immer behandeln Sie Ihren Zustand als "normales Objekt". Die Magie geschieht hinter den Kulissen mit Proxy-Objekten.

Hier ist eine Variation der ersten Antwort in diesem Thread, für die keine zusätzlichen Pakete, Bibliotheken oder Sonderfunktionen erforderlich sind.

state = {
  someProperty: {
    flag: 'string'
  }
}

handleChange = (value) => {
  const newState = {...this.state.someProperty, flag: value}
  this.setState({ someProperty: newState })
}

Um den Status eines bestimmten verschachtelten Felds festzulegen, haben Sie das gesamte Objekt festgelegt. Dazu habe ich eine Variable erstellt newStateund den Inhalt des aktuellen Status zuerst mit dem Spreizoperator ES2015 in ihn verteilt . Dann habe ich den Wert von this.state.flagdurch den neuen Wert ersetzt (da ich festgelegt habe, flag: value nachdem ich den aktuellen Status in das Objekt verteilt habe, wird das flagFeld im aktuellen Status überschrieben). Dann setze ich einfach den Status somePropertyauf mein newStateObjekt.

Obwohl das Verschachteln nicht wirklich so ist, wie Sie einen Komponentenzustand behandeln sollten, ist es manchmal einfach, das Verschachteln in einer Ebene zu vereinfachen.

Für einen Staat wie diesen

state = {
 contact: {
  phone: '888-888-8888',
  email: '[email protected]'
 }
 address: {
  street:''
 },
 occupation: {
 }
}

Eine wiederverwendbare Methode würde so aussehen.

handleChange = (obj) => e => {
  let x = this.state[obj];
  x[e.target.name] = e.target.value;
  this.setState({ [obj]: x });
};

Geben Sie dann einfach den obj-Namen für jede Verschachtelung ein, die Sie adressieren möchten ...

<TextField
 name="street"
 onChange={handleChange('address')}
 />

Ich habe diese Lösung verwendet.

Wenn Sie einen verschachtelten Status wie diesen haben:

   this.state = {
          formInputs:{
            friendName:{
              value:'',
              isValid:false,
              errorMsg:''
            },
            friendEmail:{
              value:'',
              isValid:false,
              errorMsg:''
            }
}

Sie können die handleChange-Funktion deklarieren, die den aktuellen Status kopiert und ihn mit geänderten Werten neu zuweist

handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let statusCopy = Object.assign({}, this.state);
    statusCopy.formInputs[inputName].value = inputValue;

    this.setState(statusCopy);
  }

hier das html mit dem event listener

<input type="text" onChange={this.handleChange} " name="friendName" />

Erstellen Sie eine Kopie des Status:

let someProperty = JSON.parse(JSON.stringify(this.state.someProperty))

Nehmen Sie Änderungen an diesem Objekt vor:

someProperty.flag = "false"

Aktualisieren Sie jetzt den Status

this.setState({someProperty})

Obwohl Sie nach dem Status einer klassenbasierten React-Komponente gefragt haben, besteht das gleiche Problem mit dem useState-Hook. Noch schlimmer: Der useState-Hook akzeptiert keine Teilaktualisierungen. Daher wurde diese Frage sehr relevant, als useState hook eingeführt wurde.

Ich habe beschlossen, die folgende Antwort zu veröffentlichen, um sicherzustellen, dass die Frage modernere Szenarien abdeckt, in denen der useState-Hook verwendet wird:

Wenn Sie haben:

const [state, setState] = useState({ someProperty: { flag: true, otherNestedProp: 1 }, otherProp: 2 })

Sie können die verschachtelte Eigenschaft festlegen, indem Sie die aktuelle Eigenschaft klonen und die erforderlichen Datensegmente patchen. Beispiel:

setState(current => { ...current, someProperty: { ...current.someProperty, flag: false } });

Oder Sie können die Immer-Bibliothek verwenden, um das Klonen und Patchen des Objekts zu vereinfachen.

Oder Sie können die Hookstate-Bibliothek (Haftungsausschluss: Ich bin Autor) verwenden, um einfach komplexe (lokale und globale) Statusdaten vollständig zu verwalten und die Leistung zu verbessern (lesen Sie: Keine Sorge um die Renderoptimierung):

import { useStateLink } from '@hookstate/core' 
const state = useStateLink({ someProperty: { flag: true, otherNestedProp: 1 }, otherProp: 2 })

Holen Sie sich das Feld zu rendern:

state.nested.someProperty.nested.flag.get()
// or 
state.get().someProperty.flag

Legen Sie das verschachtelte Feld fest:

state.nested.someProperty.nested.flag.set(false)

Hier ist das Hookstate-Beispiel, bei dem der Status tief / rekursiv in einer baumartigen Datenstruktur verschachtelt ist .

Zwei weitere Optionen, die noch nicht erwähnt wurden:

1. Wenn Sie einen tief verschachtelten Status haben, prüfen Sie, ob Sie die untergeordneten Objekte so umstrukturieren können, dass sie an der Wurzel sitzen. Dies erleichtert die Aktualisierung der Daten.
2. In den Redux-Dokumenten sind viele praktische Bibliotheken für den Umgang mit unveränderlichen Zuständen verfügbar . Ich empfehle Immer, da es Ihnen ermöglicht, Code auf mutative Weise zu schreiben, aber das notwendige Klonen hinter den Kulissen übernimmt. Außerdem wird das resultierende Objekt eingefroren, sodass Sie es später nicht versehentlich mutieren können.

Um die Dinge allgemeiner zu gestalten, habe ich an den Antworten von @ ShubhamKhatri und @ Qwerty gearbeitet.

Zustandsobjekt

this.state = {
  name: '',
  grandParent: {
    parent1: {
      child: ''
    },
    parent2: {
      child: ''
    }
  }
};

Eingabesteuerung

<input
  value={this.state.name}
  onChange={this.updateState}
  type="text"
  name="name"
/>
<input
  value={this.state.grandParent.parent1.child}
  onChange={this.updateState}
  type="text"
  name="grandParent.parent1.child"
/>
<input
  value={this.state.grandParent.parent2.child}
  onChange={this.updateState}
  type="text"
  name="grandParent.parent2.child"
/>

updateState-Methode

setState als Antwort von @ ShubhamKhatri

updateState(event) {
  const path = event.target.name.split('.');
  const depth = path.length;
  const oldstate = this.state;
  const newstate = { ...oldstate };
  let newStateLevel = newstate;
  let oldStateLevel = oldstate;

  for (let i = 0; i < depth; i += 1) {
    if (i === depth - 1) {
      newStateLevel[path[i]] = event.target.value;
    } else {
      newStateLevel[path[i]] = { ...oldStateLevel[path[i]] };
      oldStateLevel = oldStateLevel[path[i]];
      newStateLevel = newStateLevel[path[i]];
    }
  }
  this.setState(newstate);
}

setState als Antwort von @ Qwerty

updateState(event) {
  const path = event.target.name.split('.');
  const depth = path.length;
  const state = { ...this.state };
  let ref = state;
  for (let i = 0; i < depth; i += 1) {
    if (i === depth - 1) {
      ref[path[i]] = event.target.value;
    } else {
      ref = ref[path[i]];
    }
  }
  this.setState(state);
}

Hinweis: Diese oben genannten Methoden funktionieren nicht für Arrays

Ich nehme die bereits geäußerten Bedenken hinsichtlich der Erstellung einer vollständigen Kopie Ihres Komponentenstatus sehr ernst . Vor diesem Hintergrund würde ich Immer dringend empfehlen .

import produce from 'immer';

<Input
  value={this.state.form.username}
  onChange={e => produce(this.state, s => { s.form.username = e.target.value }) } />

Dies sollte funktionieren React.PureComponent(dh flache Zustandsvergleiche durch React), da Immerein Proxy-Objekt geschickt verwendet wird, um einen beliebig tiefen Zustandsbaum effizient zu kopieren. Immer ist außerdem typsicherer als Bibliotheken wie Immutability Helper und ideal für Benutzer von Javascript und Typescript.

Typescript- Dienstprogrammfunktion

function setStateDeep<S>(comp: React.Component<any, S, any>, fn: (s: 
Draft<Readonly<S>>) => any) {
  comp.setState(produce(comp.state, s => { fn(s); }))
}

onChange={e => setStateDeep(this, s => s.form.username = e.target.value)}

stateUpdate = () => {
    let obj = this.state;
    if(this.props.v12_data.values.email) {
      obj.obj_v12.Customer.EmailAddress = this.props.v12_data.values.email
    }
    this.setState(obj)
}

Ich fand, dass dies für mich funktioniert, da ich in meinem Fall ein Projektformular habe, in dem Sie beispielsweise eine ID und einen Namen haben, und ich lieber den Status für ein verschachteltes Projekt beibehalten möchte.

return (
  <div>
      <h2>Project Details</h2>
      <form>
        <Input label="ID" group type="number" value={this.state.project.id} onChange={(event) => this.setState({ project: {...this.state.project, id: event.target.value}})} />
        <Input label="Name" group type="text" value={this.state.project.name} onChange={(event) => this.setState({ project: {...this.state.project, name: event.target.value}})} />
      </form> 
  </div>
)

Gib mir Bescheid!

So etwas könnte ausreichen,

const isObject = (thing) => {
    if(thing && 
        typeof thing === 'object' &&
        typeof thing !== null
        && !(Array.isArray(thing))
    ){
        return true;
    }
    return false;
}

/*
  Call with an array containing the path to the property you want to access
  And the current component/redux state.

  For example if we want to update `hello` within the following obj
  const obj = {
     somePrimitive:false,
     someNestedObj:{
        hello:1
     }
  }

  we would do :
  //clone the object
  const cloned = clone(['someNestedObj','hello'],obj)
  //Set the new value
  cloned.someNestedObj.hello = 5;

*/
const clone = (arr, state) => {
    let clonedObj = {...state}
    const originalObj = clonedObj;
    arr.forEach(property => {
        if(!(property in clonedObj)){
            throw new Error('State missing property')
        }

        if(isObject(clonedObj[property])){
            clonedObj[property] = {...originalObj[property]};
            clonedObj = clonedObj[property];
        }
    })
    return originalObj;
}

const nestedObj = {
    someProperty:true,
    someNestedObj:{
        someOtherProperty:true
    }
}

const clonedObj = clone(['someProperty'], nestedObj);
console.log(clonedObj === nestedObj) //returns false
console.log(clonedObj.someProperty === nestedObj.someProperty) //returns true
console.log(clonedObj.someNestedObj === nestedObj.someNestedObj) //returns true

console.log()
const clonedObj2 = clone(['someProperty','someNestedObj','someOtherProperty'], nestedObj);
console.log(clonedObj2 === nestedObj) // returns false
console.log(clonedObj2.someNestedObj === nestedObj.someNestedObj) //returns false
//returns true (doesn't attempt to clone because its primitive type)
console.log(clonedObj2.someNestedObj.someOtherProperty === nestedObj.someNestedObj.someOtherProperty) 

Ich weiß, dass es eine alte Frage ist, wollte aber trotzdem mitteilen, wie ich dies erreicht habe. Angenommen, der Status im Konstruktor sieht folgendermaßen aus:

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      user: {
        email: ""
      },
      organization: {
        name: ""
      }
    };

    this.handleChange = this.handleChange.bind(this);
  }

Meine handleChangeFunktion ist wie folgt:

  handleChange(e) {
    const names = e.target.name.split(".");
    const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    this.setState((state) => {
      state[names[0]][names[1]] = value;
      return {[names[0]]: state[names[0]]};
    });
  }

Und stellen Sie sicher, dass Sie die Eingaben entsprechend benennen:

<input
   type="text"
   name="user.email"
   onChange={this.handleChange}
   value={this.state.user.firstName}
   placeholder="Email Address"
/>

<input
   type="text"
   name="organization.name"
   onChange={this.handleChange}
   value={this.state.organization.name}
   placeholder="Organization Name"
/>

Ich mache verschachtelte Updates mit einer reduzierten Suche:

Beispiel:

Die verschachtelten Variablen im Status:

state = {
    coords: {
        x: 0,
        y: 0,
        z: 0
    }
}

Die Funktion:

handleChange = nestedAttr => event => {
  const { target: { value } } = event;
  const attrs = nestedAttr.split('.');

  let stateVar = this.state[attrs[0]];
  if(attrs.length>1)
    attrs.reduce((a,b,index,arr)=>{
      if(index==arr.length-1)
        a[b] = value;
      else if(a[b]!=null)
        return a[b]
      else
        return a;
    },stateVar);
  else
    stateVar = value;

  this.setState({[attrs[0]]: stateVar})
}

Verwenden:

<input
value={this.state.coords.x}
onChange={this.handleTextChange('coords.x')}
/>

Dies ist mein Anfangszustand

    const initialStateInput = {
        cabeceraFamilia: {
            familia: '',
            direccion: '',
            telefonos: '',
            email: ''
        },
        motivoConsulta: '',
        fechaHora: '',
        corresponsables: [],
    }

Der Hook oder Sie können ihn durch den Status (Klassenkomponente) ersetzen.

const [infoAgendamiento, setInfoAgendamiento] = useState(initialStateInput);

Die Methode für handleChange

const actualizarState = e => {
    const nameObjects = e.target.name.split('.');
    const newState = setStateNested(infoAgendamiento, nameObjects, e.target.value);
    setInfoAgendamiento({...newState});
};

Methode zum Festlegen des Status mit verschachtelten Status

const setStateNested = (state, nameObjects, value) => {
    let i = 0;
    let operativeState = state;
    if(nameObjects.length > 1){
        for (i = 0; i < nameObjects.length - 1; i++) {
            operativeState = operativeState[nameObjects[i]];
        }
    }
    operativeState[nameObjects[i]] = value;
    return state;
}

Schließlich ist dies die Eingabe, die ich verwende

<input type="text" className="form-control" name="cabeceraFamilia.direccion" placeholder="Dirección" defaultValue={infoAgendamiento.cabeceraFamilia.direccion} onChange={actualizarState} />

Wenn Sie formik in Ihrem Projekt verwenden, gibt es eine einfache Möglichkeit, mit diesen Dingen umzugehen. Hier ist der einfachste Weg, um mit formik umzugehen.

Legen Sie zuerst Ihre Anfangswerte im Attribut formik initivalues ​​oder in der Reaktion fest. Zustand

Hier werden die Anfangswerte im Reaktionszustand definiert

   state = { 
     data: {
        fy: {
            active: "N"
        }
     }
   }

Definieren Sie die obigen Anfangswerte für das formik-Feld innerhalb des formik- initiValuesAttributs

<Formik
 initialValues={this.state.data}
 onSubmit={(values, actions)=> {...your actions goes here}}
>
{({ isSubmitting }) => (
  <Form>
    <Field type="checkbox" name="fy.active" onChange={(e) => {
      const value = e.target.checked;
      if(value) setFieldValue('fy.active', 'Y')
      else setFieldValue('fy.active', 'N')
    }}/>
  </Form>
)}
</Formik>

Erstellen Sie eine Konsole, um den Status zu überprüfen, in den stringanstelle booleander formik- setFieldValueFunktion aktualisiert wurde, um den Status festzulegen , oder verwenden Sie das React- Debugger-Tool, um die Änderungen in den formik-Statuswerten anzuzeigen.

Versuchen Sie diesen Code:

this.setState({ someProperty: {flag: false} });

Ich sah folgendes in einem Buch:

this.setState(state => state.someProperty.falg = false);

aber ich bin nicht sicher, ob es richtig ist ..