Domanda Memorizzare un oggetto in stato di un componente React?


È possibile memorizzare un oggetto nello stato di un componente React? Se sì, allora come possiamo cambiare il valore di una chiave in quell'oggetto usando setState? Penso che non sia sintatticamente permesso scrivere qualcosa come:

this.setState({ abc.xyz: 'new value' });

Su linee simili, ho un'altra domanda: Va bene avere un set di variabili in un componente React in modo tale che possano essere utilizzate in qualsiasi metodo del componente, invece di memorizzarle in uno stato?

È possibile creare un oggetto semplice che contenga tutte queste variabili e posizionarlo a livello di componente, proprio come si dichiarerebbe qualsiasi metodo sul componente.

È molto probabile che si imbattano in situazioni in cui si include molta logica aziendale nel codice e che è necessario utilizzare molte variabili i cui valori sono modificati con diversi metodi e quindi modificare lo stato del componente in base a questi valori.

Quindi, invece di mantenere tutte quelle variabili nello stato, si mantengono solo quelle variabili i cui valori dovrebbero essere riflessi direttamente nell'interfaccia utente.

Se questo approccio è migliore della prima domanda che ho scritto qui, non ho bisogno di memorizzare un oggetto nello stato.


47
2017-11-24 12:48


origine


risposte:


Oltre al post di kiran, c'è il aggiornare helper (in precedenza un addon reattivo). Questo può essere installato con npm usando npm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

Questo crea un nuovo oggetto con il valore aggiornato e altre proprietà rimangono invariate. Questo è più utile quando devi fare cose come push su un array e impostare un altro valore allo stesso tempo. Alcune persone lo usano ovunque perché forniscono immutabilità.

Se lo fai, puoi avere il seguente per compensare le prestazioni di

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}

28
2017-11-24 14:45



1) this.setState ({abc.xyz: 'nuovo valore'}); la sintassi non è consentita. Devi passare l'intero oggetto.

this.setState({abc: {xyz: 'new value'}});

Se hai altre variabili in abc

var abc = this.state.abc;
abc.xyz = 'new value';
this.setState({abc: abc});

2) Puoi avere variabili ordinarie, se non si affidano a this.props e this.state.


77
2017-11-24 12:54



È possibile distribuire i valori precedenti nell'oggetto per evitare la sovrascrittura

this.setState({
     abc: {
            ...this.state.abc,
            xyz: 'new value'
           }
});

16
2018-06-02 10:41



this.setState({abc: {xyz: 'new value'}}); NON funzionerà, come state.abc sarà interamente sovrascritto, non unito.

Questo funziona per me:

this.setState((previousState) => {
  previousState.abc.xyz = 'blurg';
  return previousState;
});

A meno che non legga i documenti errati, Facebook raccomanda il formato sopra. https://facebook.github.io/react/docs/component-api.html

Inoltre, immagino che il modo più diretto senza lo stato di muting sia quello di copiare direttamente usando l'operatore di spread / rest ES6:

const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy
newState.xyz = 'blurg';
this.setState(newState);

13
2017-08-05 01:37



Anche se può essere fatto tramite immutabilità-helper o simili non voglio aggiungere dipendenze esterne al mio codice a meno che non sia necessario. Quando ho bisogno di farlo lo uso Object.assign. Codice:

this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})})

Può essere utilizzato anche su attributi di eventi HTML, ad esempio:

onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})}

4
2018-05-03 19:42



Un modo più semplice per farlo in una riga di codice

this.setState({object: {...this.state.object, objectVarToChange: newData}})


2
2018-04-13 00:02



Ha funzionato per me.

_onPress = () => {
    this.state.abc.xyz = "new value";
    this.setState({});
}

-1
2018-04-09 11:04