In ReactCompositeComponent.js
nella sorgente React su GitHub è un metodo chiamato _processPendingState
, che è il metodo definitivo che implementa lo stato di unione dalle chiamate a component.setState;
`` ` _processPendingState: function (props, context) { var inst = this._instance; var queue = this._pendingStateQueue; var replace = this._pendingReplaceState; this._pendingReplaceState = false; this._pendingStateQueue = null;
if (!queue) {
return inst.state;
}
if (replace && queue.length === 1) {
return queue[0];
}
var nextState = replace ? queue[0] : inst.state;
var dontMutate = true;
for (var i = replace ? 1 : 0; i < queue.length; i++) {
var partial = queue[i];
let partialState = typeof partial === 'function'
? partial.call(inst, nextState, props, context)
: partial;
if (partialState) {
if (dontMutate) {
dontMutate = false;
nextState = Object.assign({}, nextState, partialState);
} else {
Object.assign(nextState, partialState);
}
}
}
`` `
In questo codice è possibile vedere la linea attuale che implementa l'unione;
nextState = Object.assign({}, nextState, partialState);
nessuna parte in questa funzione c'è una chiamata a delete
o simili, il che significa che non è realmente inteso comportamento. Inoltre, copiare completamente la statistica, eliminare la proprietà e chiamare setState non funzionerà perché setState è sempre un'unione, quindi la proprietà eliminata verrà semplicemente ignorata.
Si noti inoltre che setState non funziona immediatamente, ma i lotti cambiano, quindi se si tenta di clonare l'intero oggetto stato e si effettua solo una modifica di una proprietà, è possibile cancellare le chiamate precedenti su setState. Come dice il documento React;
React può eseguire il batch di più chiamate setState() in un singolo aggiornamento per prestazioni.
Poiché this.props e this.state possono essere aggiornati in modo asincrono, non si deve fare affidamento sui loro valori per calcolare lo stato successivo.
Quello che potresti cercare è aggiungere ulteriori informazioni;
this.setState({ xSet: true, x: 'foo' });
this.setState({ xSet: false, x: undefined });
Questo è brutto, scontato, ma ti dà l'ulteriore pezzo di informazioni è necessario distinguere tra un valore impostato su undefined, e un valore non impostato a tutti. Inoltre, funziona bene con gli interni di React, le transazioni, il cambio di stato, il batching e qualsiasi altro horror.Meglio prendere un po 'di complessità extra qui che provare a ritorsioni secondarie interne, che sono piene di orrori come la riconciliazione delle transazioni, la gestione di funzionalità deprecate come replaceState, ecc.
Entrambe queste soluzioni sono anche sbagliate. La prima ragione è che, 'Object.assign()' [non farà un clone profondo] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign #Deep_Clone), quindi potresti finire direttamente modificando lo stato senza utilizzare app più complesse. Il secondo problema si verifica in entrambe le soluzioni ed è lo stesso della risposta di @ alexander-t. Non stai rimuovendo la chiave da 'Object.keys()' come richiesto. Stai solo cambiando il suo valore. – Vince
Sì, conosco Object.keys, ma la mia risposta risolve un problema. E hai un brutto carattere come se mi inabissasse due volte. – MiF
Questo argomento non ha alcun significato emotivo per me e nessuno può votare due volte. Ho votato una volta la tua risposta perché non risolve il problema posto dalla domanda. Non sono sicuro di come questo risolva alcun problema, comunque. Se si itera su proprietà dell'oggetto stato per creare un elenco o una tabella, impostando il valore di uno di essi su 'null' /' indefinito' si genera almeno un elemento di elenco vuoto o una riga di tabella. Se il codice viene scritto per utilizzare le proprietà degli oggetti figlio, l'impostazione del valore su 'null' /' indefinito' comporterà errori difficili da risolvere. – Vince