web-dev-qa-db-fra.com

Comment puis-je réinitialiser un composant de réaction incluant tous les états accessibles de manière transitoire?

J'ai parfois des composants réactifs qui sont conceptuellement dynamiques et que je souhaite réinitialiser. Le comportement idéal équivaudrait à supprimer l'ancien composant et à lire un nouveau composant vierge.

React fournit une méthode setState qui permet de définir l'état explicite de chaque composant, mais exclut les états implicites tels que le focus du navigateur et l'état du formulaire, ainsi que l'état de ses enfants. Attraper tout cet état indirect peut être une tâche délicate, et je préférerais le résoudre de manière rigoureuse et complète plutôt que de jouer à la taupe à chaque nouvelle étape surprenante.

Existe-t-il une API ou un modèle pour le faire?

Edit: J’ai réalisé un exemple trivial illustrant l’approche this.replaceState(this.getInitialState()) et le contrastant avec l’approche this.setState(this.getInitialState()): https://jsfiddle.net/emn13/kdrzk6gh/ - replaceState est plus robuste.

reactjs
69
Eamon Nerbonne

Pour vous assurer que l'état implicite du navigateur que vous mentionnez et l'état des enfants sont réinitialisés, vous pouvez ajouter un attribut key au composant de niveau racine renvoyé par render; quand il change, ce composant sera jeté et créé à partir de zéro.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

Il n'y a pas de raccourci pour réinitialiser l'état local du composant individuel.

165
Sophie Alpert

En fait, vous devriez éviter replaceState et utiliser setState à la place.

La documentation indique que replaceState "peut être entièrement supprimé dans une future version de React." Je pense que cela sera définitivement supprimé car replaceState ne correspond pas vraiment à la philosophie de React. Cela facilite le fait que les composants React commencent à se sentir un peu comme des couteaux suisses… .. Cela empêche la croissance naturelle d’un composant React de devenir plus petit et plus spécifique.

Dans React, si vous devez vous baser sur la généralisation ou la spécialisation: visez la spécialisation. En corollaire, l’arbre d’état de votre composant doit présenter une certaine parcimonie (c’est bien de briser cette règle avec goût si vous échafaudez un nouveau produit flambant neuf).

Quoi qu'il en soit, c'est comme ça que vous le faites. Semblable à la réponse de Ben (acceptée) ci-dessus, mais comme ceci:

this.setState(this.getInitialState());

Aussi (comme Ben a également dit) afin de réinitialiser "l'état du navigateur", vous devez supprimer ce noeud DOM. Exploitez la puissance de vdom et utilisez un nouvel accessoire key pour ce composant. Le nouveau rendu remplacera ce composant en gros.

Référence: https://facebook.github.io/react/docs/component-api.html#replacestate

14
williamle8300

L'ajout d'un attribut key à l'élément à réinitialiser le rechargera à chaque changement d'associé props ou state à l'élément.

clé = {nouvelle date (). getTime ()}

Voici un exemple:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}
0
jsbisht