A quoi sert map en réaction

Utilisation de la carte dans React : 1. Utilisez "{this.state.ToDoList.map((item,index)=>{return

{item}

} )}" boucles de syntaxe pour afficher un tableau ToDoList ; 2. Utilisez le tableau pour appeler la méthode "map()" et renvoyer le contenu souhaité.

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

À quoi sert map en réaction ?

L'utilisation de la méthode map() dans React et la liaison des valeurs clés.

1. Voici un exemple d'affichage d'un tableau ToDoList en boucle.

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       ToDoList:[1,2]
    }
  }
  
  render() {
    return (
      <div>
        <input></input><button>提交</button>
        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

2. Appelez directement la méthode map() avec un tableau, renvoyez le contenu souhaité et liez la valeur clé.

        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>

2.1 Pour plus de commodité, la valeur de la clé liée ici est l'indice du tableau. Ceci n'est pas recommandé en utilisation réelle, car lorsque l'algorithme Diff de React effectue une comparaison de composants, si la clé appelée est l'indice du tableau, la clé appelée est l'indice du tableau. Le tableau changera. Cela entraînera que le contenu du tableau correspondant à l'indice soit incorrect, comme

[1,2,3]. Après avoir supprimé 1, il deviendra [2,3]. 1, et l'indice 1 correspond à 2. L'indice 2 correspond à 3. Après le changement, l'indice 0 correspond à 2 et l'indice 1 correspond à 3. Évidemment, cela posera des problèmes lorsque l'algorithme Diff comparera deux DOM virtuels, car l'indice correspondant le contenu est différent lorsque l'identifiant est le même. Non, la signification de l'identifiant est perdue. Par conséquent, il n’est pas recommandé d’utiliser des indices de tableau comme valeurs clés. Ceci est écrit sur la base de ma propre compréhension. Il peut y avoir des malentendus. Quoi qu'il en soit, c'est le sens général. Veuillez me corriger s'il y a des erreurs.

3. Le résultat en cours d'exécution est le suivant

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!