einen neuen Satz von Array Karte Methode

Question

Zurück Wie kann ich einen neuen Satz von Array zurück map basierend auf 2 Bedingungen:

• Die Feldlänge nicht 0
• Rolle Moderator
sein sollte sein sollte

Dieses ist meine ursprüngliche Antwort sieht aus wie

Reagieren Funktion, die Karten, die die Antwort

_getList(memberships) { 
    const items = memberships.map((membership) => { 
     return (
      <RadioButton 
       value={membership.forum.slug} 
       label={membership.forum.title} /> 
     ); 
    }); 

    return(
     <RadioButtonGroup> 
      {items} 
     </RadioButtonGroup> 
    ); 
} 

In meiner Render-Funktion ich überprüft habe, wenn die Länge nicht 0

const renderedList = this._getList(UserStore.getState().memberships.length !== 0); 

ist, wie soll ich erneut die Kontrolle, dass das neue Array hinzufügen zurück sollte nur das enthält Daten mit role === moderator

Answer 1

Mit Filter

_getList(memberships) { 
    const items = (memberships.filter(membership => membership.role === 'moderator') || []).map((membership) => { 
     return (
      <RadioButton 
       value={membership.forum.slug} 
       label={membership.forum.title} /> 
     ); 
    }); 

    if(items.length === 0) return null; 

    return(
     <RadioButtonGroup> 
      {items} 
     </RadioButtonGroup> 
    ); 
} 

dann könnte man dies tun:

const renderedList = this._getList(UserStore.getState().memberships); 

if(renderedList) { 
    this.renderSomething(); 
} else { 
    this.renderSomethingElse(); 
} 

Answer 2

Sie möchten einen Blick auf die .filter-Methode der Array-API werfen.

const items = memberships 
    .filter(item => item.role === 'moderator') 
    .map((membership) => { 
     return (
      <RadioButton 
       value={membership.forum.slug} 
       label={membership.forum.title} /> 
     ); 
    }) 

.filter wird durch alle Mitglied des Arrays iterieren und ein neues Array mit allen Elementen zurückzugeben, die den Test durch die vorgesehene Funktion implementiert passieren. Wenn das Array memberships leer ist, wird einfach ein leeres Array zurückgegeben.

Dies setzt voraus, dass die memberships-Eigenschaft immer ein Array ist. Entweder ein Array mit Werten oder ein leeres Array ([]). Wenn die memberships-Eigenschaft fehlt, müssen Sie noch einen Scheck wie Ihren renderedList einen hinzufügen.