Mehrere Elemente aus dem Datenbankarray mithilfe von .map in einer React Component zerlegen?

Question

Ich lerne React und stieß auf ein Problem beim Rendern mehrerer Elemente.

Das Problem ist, dass ich ein Array von Firebase abrufen, die ein neues div und svg für jedes Element im Array zurückgeben muss. Ich verstehe, dass React nur 1 Element rendert, also muss ich meinen Inhalt in einen Wrapper legen, was ich getan habe. Ich habe auch eine Variable erstellt, die .map() verwendet, um das Array durchzulaufen und diese Elemente für mich zu erstellen.

Was ich nicht verstehe, warum gibt es nicht ein neues div und svg für jedes Element im Array? Stattdessen schafft es nur 1 Div und Svg? Das Array enthält eine Liste von Ordnernamen.

Jede Hilfe wäre willkommen.

Console.log (this.props.data) gibt den folgenden Screenshot zurück.

Answer 1

In Ihrer Ausgabe .. currentObj.name ist eine array .. so müssen Sie auch darüber zu durchlaufen, wenn Sie div für jedes Element innerhalb name Array erstellen möchten.

Man könnte so etwas wie tun:

class SidebarPrivateFolders extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 

    let list = this.props.data.map((currentObj) => { 
return currentObj.name[0].map((innerArray,i) => { 
     return (
     <div key={i}> 
      <svg className="sidebar-icon"> 
      <use xlinkHref={currentObj.xlinkHref}></use> 
      </svg> 
      <div className="public-folders">{currentObj.innerArray[i]}</div> 
     </div> 
    ); 
    }); 
    }); 

    return (
     <div className="sidebar-section"> 
     <div className="sidebar-section-wrapper"> 
      {list} 
     </div> 
     </div> 
    ); 
    } 

P. S Dies ist Lösung nicht getestet ist. Sie könnten Syntaxfehler bekommen

Answer 2

EDIT v2: Ihre Dateneingabe ist interessanterweise organisiert, wenn Sie diesen Eingang von einer höheren Ebene erstellen, es effizient sein kann, neu zu organisieren, wie es jedoch zusammengesetzt ist, die Elemente aus dem Datenarray dekonstruieren macht es einfacher, in den folgenden Funktionen aufrufen:

// Take out the name array and xlinkHref from data 
let {xlinkHref, name} = this.props.data[0]; 
let list = name[0].map((name, i) => { 
    return (
    <div key={'sidebar_'+i}> 
     <svg className="sidebar-icon"> 
     <use xlinkHref={xlinkHref}></use> 
     </svg> 
     <div className="public-folders">{name}</div> 
    </div> 
); 
}); 

Original-Antwort ohne Daten Beispiel:

Ein Teil des internen diffing Algorithmus Reagieren Listen von generierten Objekten erfordert identifie zu sein d mit einer eindeutigen "Schlüssel" -Eigenschaft. Sie müssen diese Eigenschaft dem Wrapping-Div jedes Iterators hinzufügen.

So können Sie innerhalb der Map-Funktion den Parameter für den Index der Karte verfolgen und diese verwenden, um die Schlüssel Ihrer Liste getrennt zu halten.

Es gibt eine gute Erklärung dafür hier im Abschnitt Dynamische Kinder: https://facebook.github.io/react/docs/multiple-components.html

Hier ist, was Ihr Code aussehen könnte:

class SidebarPrivateFolders extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 

    let list = this.props.data.map((currentObj, i) => { 
     return (
     <div key={'sidebarlist_'+i}> 
      <svg className="sidebar-icon"> 
      <use xlinkHref={currentObj.xlinkHref}></use> 
      </svg> 
      <div className="public-folders">{currentObj.name}</div> 
     </div> 
    ); 
    }); 

    return (
     <div className="sidebar-section"> 
     <div className="sidebar-section-wrapper"> 
      {list} 
     </div> 
     </div> 
    ); 
    } 
} 

Lassen Sie mich wissen, ob dies Ihr Problem behebt.