Comment mettre à jour l'état imbriqué dans React : un guide étape par étape

Mise à jour de l'état imbriqué dans React

Dans le contexte d'une application React, vous pouvez rencontrer des situations où vous devez mettre à jour une propriété spécifique de un objet d’état profondément imbriqué. Un de ces scénarios est celui de la construction d'un formulaire dans lequel les utilisateurs peuvent définir des champs et spécifier divers détails.

Scénario :

Vous disposez d'un objet d'état initial représentant les champs du formulaire, où chacun Le champ est identifié par une clé et possède des propriétés telles que name et populate_at. Vous souhaitez permettre aux utilisateurs de modifier ces propriétés lorsqu'ils interagissent avec les contrôles du formulaire.

Défi :

Cibler l'objet spécifique à mettre à jour dans l'état peut être difficile, en particulier lors de l'utilisation d'objets imbriqués.

Solution :

Pour mettre à jour state.item[1].name, vous pouvez utiliser les étapes suivantes :

1. Faites une copie superficielle de l'objet d'état :

<code class="javascript">let items = [...this.state.items];</code>

2. Créez une copie superficielle de l'élément spécifique que vous souhaitez mettre à jour :

<code class="javascript">let item = {...items[1]};</code>

3. Remplacez la propriété souhaitée dans la copie :

<code class="javascript">item.name = 'newName';</code>

4. Remettez l'élément mis à jour dans la copie de l'objet d'état :

<code class="javascript">items[1] = item;</code>

5. Définissez l'état sur la copie modifiée :

<code class="javascript">this.setState({items});</code>

Vous pouvez également combiner les étapes 2 et 3 en une seule ligne :

<code class="javascript">let item = {...items[1], name: 'newName'};</code>

Solution sur une seule ligne :

Voici comment effectuer la mise à jour complète sur une seule ligne à l'aide des opérateurs de répartition de tableau :

<code class="javascript">this.setState(({items}) => ({
    items: [
        ...items.slice(0, 1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));</code>

Remarque :

C'est Il est important de noter que l'objet d'état dans votre exemple est structuré à l'aide d'objets simples. Dans les applications React modernes, il est recommandé d'utiliser le hook useState ou Redux pour la gestion de l'état.

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!