Que faire si les modifications du tableau de réaction ne sont pas mises à jour

Les modifications du tableau React ne sont pas mises à jour car les affectations de tableau dans js sont transmises par référence. La solution est la suivante : 1. Ouvrez le fichier de réaction correspondant ; 2. Utilisez l'opérateur spread pour créer un nouveau tableau et modifiez la référence mémoire ; utilisez "panes.push({key: panes.length,tab: `${panes.length + 1}`})" pour réaffecter la valeur.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Que dois-je faire si le tableau de réaction change mais ne se met pas à jour ?

Lorsque l'attribut d'un élément d'un tableau d'état change en réaction, la page setState n'est pas mise à jour

Pendant le processus d'écriture du code, vous constaterez que si vous utilisez directement push et d'autres méthodes pour changer l'état, logiquement en parlant, push modifiera le tableau d'origine. Il devrait être mis à jour, mais l'état rendu ne changera pas.

Le problème que j'ai rencontré aujourd'hui est le suivant : après avoir modifié les éléments du tableau dans le composant, les données changent mais la page n'est pas restituée

On dit que c'est parce que le composant ne peut pas reconnaître les modifications dans le tableau, donc le la page n'est pas restituée

Alors laissez simplement le composant Lorsque vous sentez que vous avez changé, vous pouvez obtenir l'effet de rafraîchissement

Raison :

C'est parce qu'en js, l'affectation du tableau est passée par référence . array.push équivaut à changer directement le bloc de mémoire correspondant au tableau, mais la mémoire du tableau utilisé pour la comparaison dans React n'a pas changé et pointe vers la même mémoire SetState ne fait qu'une comparaison superficielle, donc le nouveau rendu n'est pas effectué. déclenché.

Vous pouvez utiliser l'opérateur spread pour créer un nouveau tableau et modifier la référence mémoire

Exigence :

Solution : Réaffecter après déstructuration

const onClick = (key) => {// tab点击函数
    if (key === 'addTab') {
      panes.push({
        key: panes.length,
        tab: `筛选记录${panes.length + 1}`
      })
      setPanes([...panes])
    }
  }

Apprentissage recommandé : "Tutoriel vidéo React"

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!