Sto cercando di organizzare il mio stato utilizzando la proprietà nidificata in questo modo:

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

Ma l'aggiornamento dello stato in questo modo,

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

non funziona Come può essere fatto correttamente?

Per setStateun oggetto nidificato è possibile seguire l'approccio seguente poiché penso che setState non gestisca gli aggiornamenti nidificati.

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

L'idea è quella di creare un oggetto fittizio eseguire operazioni su di esso e quindi sostituire lo stato del componente con l'oggetto aggiornato

Ora, l'operatore di diffusione crea solo una copia nidificata di livello dell'oggetto. Se il tuo stato è fortemente nidificato come:

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

È possibile impostareState utilizzando l'operatore spread ad ogni livello come

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

Comunque la sintassi sopra diventa brutta man mano che lo stato diventa sempre più nidificato e quindi ti consiglio di usare il immutability-helperpacchetto per aggiornare lo stato.

Vedi questa risposta su come aggiornare lo stato con immutability helper.

Per scriverlo in una riga

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

A volte le risposte dirette non sono le migliori :)

Versione breve:

questo codice

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

dovrebbe essere semplificato come qualcosa del genere

this.state = {
    somePropertyFlag: true
}

Versione lunga:

Attualmente non dovresti voler lavorare con lo stato nidificato in React . Perché React non è orientato a lavorare con stati nidificati e tutte le soluzioni qui proposte sembrano hack. Non usano il framework ma combattono con esso. Suggeriscono di scrivere un codice non così chiaro per uno scopo dubbio di raggruppare alcune proprietà. Quindi sono molto interessanti come risposta alla sfida ma praticamente inutili.

Immaginiamo il seguente stato:

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

Cosa succederà se cambi solo un valore di child1? React non eseguirà nuovamente il rendering della vista perché utilizza un confronto superficiale e scoprirà che la parentproprietà non è cambiata. La BTW che muta direttamente l'oggetto di stato è considerata una cattiva pratica in generale.

Quindi è necessario ricreare l'intero parentoggetto. Ma in questo caso incontreremo un altro problema. React penserà che tutti i bambini hanno cambiato i loro valori e li ridistribuirà tutti. Ovviamente non è buono per le prestazioni.

È ancora possibile risolvere questo problema scrivendo una logica complicata, shouldComponentUpdate()ma preferirei fermarmi qui e utilizzare una soluzione semplice dalla versione breve.

disconoscimento

Lo stato nidificato in React ha un design errato

Leggi questa risposta eccellente .

Ragionamento dietro questa risposta:

SetState di React è solo una comodità integrata, ma presto ti rendi conto che ha i suoi limiti. L'uso di proprietà personalizzate e l'uso intelligente di forceUpdate ti offrono molto di più. per esempio:

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

MobX, ad esempio, i fossi dichiarano completamente e usano proprietà osservabili personalizzate.
Usa gli osservabili anziché lo stato nei componenti di React.

la risposta alla tua miseria - vedi esempio qui

Esiste un altro modo più breve per aggiornare qualsiasi proprietà nidificata.

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

Su una riga

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

_{nota: questo qui è Operatore virgola ~ MDN , vederlo in azione qui (Sandbox) .}

È simile a (sebbene questo non cambi il riferimento di stato)

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

_{Per la sottile differenza in questo contesto tra forceUpdatee setStatevedere l'esempio collegato.}

Naturalmente questo sta abusando di alcuni principi fondamentali, come statedovrebbe essere di sola lettura, ma poiché scarti immediatamente il vecchio stato e lo sostituisci con uno nuovo, è completamente ok.

avvertimento

Anche se il componente che contiene lo stato si aggiornerà e eseguirà nuovamente il rendering ( tranne questo gotcha ) , gli oggetti di scena non si propagheranno ai bambini (vedere il commento di Spymaster di seguito) . Usa questa tecnica solo se sai cosa stai facendo.

Ad esempio, puoi passare un puntello piatto modificato che viene aggiornato e passato facilmente.

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

Ora, anche se il riferimento per complexNestedProp non è cambiato ( shouldComponentUpdate )

this.props.complexNestedProp === nextProps.complexNestedProp

il componente eseguirà nuovamente il rendering ogni volta che il componente padre si aggiorna, come nel caso della chiamata this.setStateo this.forceUpdatenel padre.

Effetti della mutazione dello stato

Uso stato annidato e mutando direttamente lo stato è pericoloso perché diversi oggetti potrebbero tenere (intenzionalmente o meno) diversi (vecchi) riferimenti alla condizione e potrebbero non necessariamente sapere quando dell'aggiornamento (ad esempio quando si utilizza PureComponento se shouldComponentUpdateviene implementato per ritorno false) OR sono destinato a visualizzare vecchi dati come nell'esempio seguente.

Immagina una linea temporale che dovrebbe rendere i dati storici, la mutazione dei dati sotto la mano comporterà un comportamento imprevisto in quanto cambierà anche gli elementi precedenti.

Comunque qui puoi vedere che Nested PureChildClassnon è stato reso di nuovo a causa della mancata propagazione degli oggetti di scena.

Se si utilizza ES2015, si ha accesso a Object.assign. Puoi usarlo come segue per aggiornare un oggetto nidificato.

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

Unisci le proprietà aggiornate con quelle esistenti e usa l'oggetto restituito per aggiornare lo stato.

Modifica: aggiunto un oggetto vuoto come destinazione alla funzione di assegnazione per assicurarsi che lo stato non sia mutato direttamente come indicato da Carkod.

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

Ci sono molte librerie per aiutarti in questo. Ad esempio, utilizzando immutability-helper :

import update from 'immutability-helper';

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

Usando lodash / fp set:

import {set} from 'lodash/fp';

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

Utilizzando lodash / fp merge:

import {merge} from 'lodash/fp';

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

Usiamo Immer https://github.com/mweststrate/immer per gestire questo tipo di problemi.

Ho appena sostituito questo codice in uno dei nostri componenti

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

Con questo

import produce from 'immer';

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

Con immer gestisci il tuo stato come un "oggetto normale". La magia accade dietro la scena con oggetti proxy.

Ecco una variazione sulla prima risposta data in questo thread che non richiede alcun pacchetto aggiuntivo, librerie o funzioni speciali.

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

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

Per impostare lo stato di uno specifico campo nidificato, è stato impostato l'intero oggetto. Ho fatto questo creando una variabile, newStatee diffondere il contenuto dello stato corrente in esso prima usando l'ES2015 operatore diffusione . Quindi, ho sostituito il valore di this.state.flagcon il nuovo valore (dal momento che ho impostato flag: value dopo aver diffuso lo stato corrente nell'oggetto, il flagcampo nello stato corrente viene sovrascritto). Quindi, ho semplicemente impostato lo stato del somePropertymio newStateoggetto.

Sebbene l'annidamento non sia proprio il modo in cui dovresti trattare lo stato di un componente, a volte per qualcosa di facile per l'annidamento a livello singolo.

Per uno stato come questo

state = {
 contact: {
  phone: '888-888-8888',
  email: 'test@test.com'
 }
 address: {
  street:''
 },
 occupation: {
 }
}

Un metodo riutilizzabile in uso sarebbe simile a questo.

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

quindi basta passare il nome obj per ogni annidamento che si desidera affrontare ...

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

Ho usato questa soluzione.

Se hai uno stato nidificato come questo:

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

è possibile dichiarare la funzione handleChange che copia lo stato corrente e lo riassegna con i valori modificati

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

qui l'html con il listener di eventi

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

Crea una copia dello stato:

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

apportare modifiche in questo oggetto:

someProperty.flag = "false"

ora aggiorna lo stato

this.setState({someProperty})

Sebbene tu abbia chiesto informazioni sullo stato del componente React basato sulla classe, lo stesso problema esiste con il hook useState. Ancora peggio: il gancio useState non accetta aggiornamenti parziali. Quindi questa domanda è diventata molto rilevante quando è stato introdotto il gancio useState.

Ho deciso di pubblicare la seguente risposta per assicurarmi che la domanda riguardi scenari più moderni in cui viene utilizzato il hook useState:

Se hai:

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

è possibile impostare la proprietà nidificata clonando l'attuale e correggendo i segmenti richiesti dei dati, ad esempio:

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

Oppure puoi usare la libreria Immer per semplificare la clonazione e la correzione dell'oggetto.

Oppure puoi utilizzare la libreria Hookstate (dichiarazione di non responsabilità: sono un autore) per semplicemente la gestione di dati di stato complessi (locali e globali) interamente e migliorare le prestazioni (leggi: non preoccuparti dell'ottimizzazione del rendering):

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

ottenere il campo per il rendering:

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

imposta il campo nidificato:

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

Ecco l'esempio di Hookstate, in cui lo stato è nidificato in modo ricorsivo / profondo nella struttura di dati ad albero .

Altre due opzioni non ancora menzionate:

1. Se hai uno stato profondamente annidato, considera se puoi ristrutturare gli oggetti figlio in modo che siedano alla radice. Ciò semplifica l'aggiornamento dei dati.
2. Ci sono molte utili librerie disponibili per la gestione dello stato immutabile elencate nei documenti Redux . Consiglio Immer in quanto consente di scrivere codice in modo mutativo ma gestisce la clonazione necessaria dietro le quinte. Inoltre congela l'oggetto risultante in modo da non poterlo mutare accidentalmente in un secondo momento.

Per rendere le cose generiche, ho lavorato sulle risposte di @ ShubhamKhatri e @ Qwerty.

oggetto di stato

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

controlli di input

<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"
/>

metodo updateState

setState come risposta di @ 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 come risposta di @ 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);
}

Nota: questi metodi sopra non funzioneranno per le matrici

Prendo molto sul serio le preoccupazioni già espresse in merito alla creazione di una copia completa del tuo stato di componente. Detto questo, suggerirei vivamente Immer .

import produce from 'immer';

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

Questo dovrebbe funzionare per React.PureComponent(cioè confronti di stati superficiali di React) poiché Immerutilizza abilmente un oggetto proxy per copiare in modo efficiente un albero di stato arbitrariamente profondo. Immer è anche più versatile rispetto alle librerie come Immutability Helper ed è ideale sia per gli utenti Javascript che per quelli Typescript.

Funzione di utilità dattiloscritta

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

Ho scoperto che questo funziona per me, avendo una forma di progetto nel mio caso in cui ad esempio hai un ID e un nome e preferirei mantenere lo stato per un progetto nidificato.

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

Fammi sapere!

Qualcosa del genere potrebbe bastare,

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) 

So che è una vecchia domanda, ma volevo ancora condividere come ho raggiunto questo obiettivo. Supponendo che lo stato nel costruttore sia simile al seguente:

  constructor(props) {
    super(props);

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

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

La mia handleChangefunzione è così:

  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]]};
    });
  }

E assicurati di nominare gli input di conseguenza:

<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"
/>

Faccio aggiornamenti nidificati con una ricerca ridotta :

Esempio:

Le variabili nidificate nello stato:

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

La funzione:

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

Uso:

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

Questo è il mio stato iniziale

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

L'hook o è possibile sostituirlo con lo stato (componente di classe)

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

Il metodo per handleChange

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

Metodo per impostare lo stato con stati nidificati

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;
}

Finalmente questo è l'input che uso

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

Se stai usando formik nel tuo progetto, ha un modo semplice per gestire queste cose. Ecco il modo più semplice di fare con formik.

Innanzitutto imposta i tuoi valori iniziali all'interno dell'attributo formik initivalues ​​o nella reazione. stato

Qui, i valori iniziali sono definiti nello stato di reazione

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

definire sopra i valori iniziali per il campo formik all'interno initiValuesdell'attributo formik

<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>

Crea una console per verificare lo stato in cui è stato aggiornato stringanziché booleanla setFieldValuefunzione formik per impostare lo stato o vai con lo strumento di debug di reazione per vedere le modifiche all'interno dei valori di stato di formik.

prova questo codice:

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

ho visto quanto segue in un libro:

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

ma non sono sicuro che sia giusto ..