Comment puis-je supprimer un attribut à partir d'un Reactjs composant de l'objet de l'état

Le code suivant supprime foo de this.state sans en faire directement la mutation this.state:

const {foo, ...state} = this.state;
this.setState({state});

Vous aurez besoin de la étape 3 preset pour que cela fonctionne.

OriginalL'auteur Distortum

Dans ReactCompositeComponent.js dans la Réagir la source sur GitHub est une méthode appelée _processPendingState, qui est la méthode qui met en œuvre la fusion de l'état à partir d'appels sur le composant.setState;

``
_processPendingState: function(accessoires, context) {
var inst = ce._instance;
var file = ce._pendingStateQueue;
var replace = ce._pendingReplaceState;
c'._pendingReplaceState = false;
c'._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);
    }
  }
}

``

Dans ce code, vous pouvez voir la ligne qui met en œuvre la fusion;

nextState = Object.assign({}, nextState, partialState);

Nulle part dans cette fonction, est-il un appel à delete ou similaires, ce qui signifie qu'il n'est pas vraiment l'intention de comportement. Aussi, complètement copie de l'état, la suppression de la propriété, et de l'appel de setState ne fonctionnera pas parce que setState est toujours une opération de fusion, de sorte que la propriété supprimée sera simplement ignoré.

Note également que setState ne fonctionne pas immédiatement, mais les lots de changements, donc, si vous essayez de cloner l'ensemble de l'état de l'objet et faire seulement un changement de propriété, vous pouvez essuyer des précédents appels à setState. Comme Réagir document dit;

Peut réagir par lots de plusieurs setState() appels en une seule mise à jour pour la performance.

Parce que cette.des accessoires et de la ce.l'état peut être mis à jour de manière asynchrone, vous ne devriez pas compter sur leurs valeurs pour le calcul de l'état suivant.

Ce que vous pourriez chercher à faire est d'ajouter plus d'infos;

this.setState({ xSet: true, x: 'foo' });
this.setState({ xSet: false, x: undefined });

C'est moche, d'accord, mais il vous donne la pièce supplémentaire de l'info, vous avez besoin de faire la distinction entre une valeur indéfinie, et une valeur non définie. De Plus il joue de nice à Réagir lui-même, des transactions, de modification de l'état de traitement par lots, et tout autre horreur. Mieux vaut prendre un peu plus de complexité ici que d'essayer de deviner Réagit internes, qui sont pleins d'horreurs comme les transactions de la réconciliation, de la gestion des fonctions obsolètes comme replaceState, etc

OriginalL'auteur Steve Cooper

Si vous souhaitez réinitialiser complètement l'état (en supprimant un grand nombre d'éléments), quelque chose comme cela fonctionne:

this.setState(prevState => {
    let newState = {};
    Object.keys(prevState).forEach(k => {
        newState[k] = undefined;
    });
    return newState;
});

À l'aide de cette variante de setState vous permet d'accéder à l'ensemble de l'état au cours de l'appel, alors que this.state pourrait être un peu hors de date (due à l'avant setState appels n'ayant pas encore été entièrement traitée).

OriginalL'auteur Malvineous