Was ist die Verwendung von Map in React

Verwendung der Karte in React: 1. Verwenden Sie „{this.state.ToDoList.map((item,index)=>{return

{item}

} )}“-Syntaxschleifen, um ein Array ToDoList anzuzeigen; 2. Verwenden Sie das Array, um die Methode „map()“ aufzurufen und den gewünschten Inhalt zurückzugeben.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wozu dient Map in React?

Die Verwendung der Methode map() in React und die Bindung von Schlüsselwerten.

1. Hier ist ein Beispiel für die Anzeige eines Arrays ToDoList in einer Schleife.

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. Rufen Sie die Methode map() direkt mit einem Array auf, geben Sie den gewünschten Inhalt zurück und binden Sie den Schlüsselwert.

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

2.1 Der Einfachheit halber ist der gebundene Schlüsselwert hier der Index des Arrays. Dies wird in der tatsächlichen Verwendung nicht empfohlen, da der aufgerufene Schlüssel der Index des Arrays ist, wenn der Diff-Algorithmus in React einen Komponentenvergleich durchführt Das Array ändert sich. Dadurch wird der dem Index entsprechende Array-Inhalt falsch, z. B.

[1,2,3]. Nach dem Löschen wird 1 zu

Der ursprüngliche Index entspricht 1 und der Index 1 entspricht 2. Index 2 entspricht 3. Nach der Änderung entspricht Index 0 2 und Index 1 entspricht 3. Dies führt offensichtlich zu Problemen, wenn der Diff-Algorithmus zwei virtuelle DOMs vergleicht, da die entsprechenden Der Inhalt ist anders, wenn die ID gleich ist. Nein, die Bedeutung der ID geht verloren. Daher wird die Verwendung von Array-Indizes als Schlüsselwerte nicht empfohlen. Dies basiert auf meinem eigenen Verständnis. Es kann jedoch zu Missverständnissen kommen. Bitte korrigieren Sie mich, wenn es Fehler gibt.

3. Das Laufergebnis ist wie unten dargestellt

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Map in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!