Reagieren 16 Iterieren über Map-Rendering-Schlüssel

Question

Ich versuche, über eine Immutable.js-Map zu iterieren, um eine Komponente zu rendern, aber obwohl dies gerendert wird, wird auch der Schlüssel für die Seite gerendert. Ich bin mir nicht sicher warum.

render() { 
    const myMap = new Map({foo: '', bar: 'http://google.com/'}) 
    const {showFoo, titleAndUrl} = this.props 
    return (
     <ul style={[ 
     styles.container, 
     showFoo && styles.container.inline, 
     ]}> 
     {myMap.map((title, url) => this.renderTab(url, title))} 
     </ul> 
    ) 
    } 

    renderTab(title, url) { 
    const {showFoo, isFoo} = this.props 
    return (
     <li key="sb" style={[ 
     styles.listItem, 
     showFoo && styles.listItem.inline, 
     ]}> 
     <a 
      href={url} 
      key={title} 
      style={[ 
      styles.link, 
      styles.activeLink, 
      showFoo && styles.link.inline, 
      ]} 
      className={isFoo ? "style" : ''}> 
      {title} 
     </a> 
     </li> 
    ) 
    } 
} 

Die beiden Namen und URLs korrekt gerendert werden jedoch Nachschlüssel gemacht dh foo wird zweimal gemacht und so ist eine Bar, aber eine der foo und bar Tasten hat keine Stile, was darauf hindeutet, wird es außerhalb gerendert wird von this.renderTab

Siehe Bild:

Rendered HTML:

<ul data-radium="true" 
    style="display: flex; align-items: center; padding: 0px; margin: 0px; list-style: none; width: 100%; border-top: 1px solid rgb(221, 221, 221); height: 48px;"> 
    foo 
    <li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a href="" 
                           class="" 
                           data-radium="true" 
                           style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">foo</a> 
    </li> 
    bar 
    <li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a 
      href="http://google.com" class="" data-radium="true" 
      style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">bar</a> 
    </li> 
</ul> 

Answer 1

Sie haben die Reihenfolge Ihrer Argumente vertauscht und title zu url zugewiesen und umgekehrt.

Auch die Argumente, die an die Callback-Funktion für Immutable.Map.map übergeben werden, sind (1) value, (2) key, also ist das erste Argument Ihre URL und die zweite ist Ihr Titel.

Ändern Sie die Zeile mit dem Aufruf von map wie so:

{myMap.map((url, title) => this.renderTab(title, url))} 

Ein weiteres Problem ist, dass die Listenelement Elemente Sie machen alle den gleichen Schlüssel „sb“ haben, nur den Schlüssel der „a“ Elemente ändern sich, aber das ist nicht einmal nötig.

Ändern der JSX von renderTab zu diesem Retour:

<li key={title} style={[ 
    styles.listItem, 
    showFoo && styles.listItem.inline, 
    ]}> 
    <a 
     href={url} 
     style={[ 
     styles.link, 
     styles.activeLink, 
     showFoo && styles.link.inline, 
     ]} 
     className={isFoo ? "style" : ''}> 
     {title} 
    </a> 
    </li> 

Schließlich ist der Hauptfehler, dass Sie Immutable.Map.map erwarten ein Array zurück, aber es funktioniert nicht, gibt es eine andere unveränderliche Karte, so dass Sie Um den von der Kartenfunktion zurückgegebenen Wert in ein Array zu konvertieren, verwenden Sie valueSeq und toArray.

So Ihre Karte Aussage eigentlich sollte wie folgt aussehen:

{myMap.map((url, title) => this.renderTab(title, url)).valueSeq().toArray()} 

→ see related post on Stack Overflow