Comment mettre à jour correctement les propriétés d'état imbriquées dans React ?

Modification des propriétés d'état imbriquées dans React

Les propriétés d'état imbriquées fournissent une organisation logique pour les structures d'état complexes dans React. Cependant, tenter de mettre à jour ces propriétés directement à l'aide de this.setState ne produit pas le résultat souhaité.

Solution :

Pour mettre à jour correctement les propriétés d'état imbriquées, suivez ces étapes pour préserver l'immuabilité de l'État :

1. Créer un Copier :

   • Copiez la propriété imbriquée dans une nouvelle variable à l'aide de l'opérateur de propagation, par exemple, var someProperty = {...this.state.someProperty}.

2. Modifier le Copier :

   • Apportez les modifications nécessaires à la propriété copiée, par exemple someProperty.flag = true.

3. Mettre à jour l'état :

   • Mettre à jour l'état du composant en le définissant sur copie modifiée, par exemple, this.setState({someProperty}).

Pour les États hautement imbriqués :

Si l'état est profondément imbriqué, il n’est pas pratique d’utiliser l’opérateur spread à chaque niveau. Pensez à utiliser le package immutability-helper pour des mises à jour plus élégantes :

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

Immutability-Helper :

Le package immutability-helper fournit une syntaxe plus concise et intuitive pour mise à jour des propriétés d'état imbriquées :

import {update} from "immutability-helper";
this.setState(update(this.state, {
  someProperty: {
    someOtherProperty: {
      anotherProperty: {
        flag: {$set: false}
      }
    }
  }
}));

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!