reagieren wird nur das letzte Element in dem Array Anzeige

Question

renderItems(game){ 

    if (game.category_id === 2) { 
     ownedGames.map((owned_game) => { 
      if (owned_game.game_id === game.game_id) { 
       renderPriceSection = renderOwned 
       console.log(owned_game.game_title) 
      } else { 
       renderPriceSection = renderPrice 
      } 
     }) 
    } else { 
     renderPriceSection = renderFreeToPlayTitle 
    } 

} 
... 
return(
    {renderPriceSection} 
) 

Ich versuche, einige Etiketten anzuzeigen: Owned, $Price, Free

Die console.log wird alle richtigen Spiele angezeigt werden, die die Owned Label haben sollte.

Aber auf der Seite, die Owned Label ist nur für das letzte Element zeigt sich im owned_games Array.

Eine Idee, warum das passiert?

---

Edit:

Ich entfernte die renderItems() Funktion und ersetzt {renderPriceSection} mit diesem:

{game.category_id === 2 ? 
     ownedGames.map(owned_game => 
      owned_game.game_id === game.game_id ? renderOwned : renderPrice 
     ) : 
     renderFreeToPlayTitle 
    } 

Nun ist die renderOwned und renderPrice wird für jedes Element wird angezeigt owned_games.length mal.
So jetzt bin ich auf der gegenüberliegenden Seite der falschen Ausgabe :)))

Answer 1

Array.map gibt ein anderes Array zurück. Es scheint, dass Sie nichts innerhalb Ihrer map Funktion zurückgeben. Es ist auch nicht klar, was renderPriceSelection sein soll.

renderPriceSelection = ownedGames.map((owned_game) => { 
    if (owned_game.game_id === game.game_id) { 
    return renderOwned 
    } else { 
    return renderPrice 
    } 
}) 

render {renderPriceSelection} 

Answer 2

Da Sie den gleichen Bezug von renderPriceSection auf jeder anderen Iteration modifizieren Sie das gleiche Objekt ändern, Sie sind nicht einen neuen erstellt.

Answer 3

Von diesem Code nicht ganz klar, aber es scheint mir, dass Sie die Variable renderPriceSection bei jeder Iteration neu zu schreiben, und das ist, warum renderItems das letzte Element kehrt jedes Mal

Answer 4

Sie speichern die renderPriceSelection in Form eines Array wie unten, und dann dieses Array rendern, wenn Sie Werte von dieser angegebenen Funktion zurückgeben, hier habe ich als Listenelemente zurückgegeben. Ich hoffe es hilft.

renderItems(game){ 

    renderPriceSection = []; 

    if (game.category_id === 2) { 
    ownedGames.map((owned_game) => { 
     if (owned_game.game_id === game.game_id) { 
      renderPriceSection.push(renderOwned); 
      console.log(owned_game.game_title) 
     } else { 
      renderPriceSection.push(renderPrice); 
     } 
     }) 
    } else { 
     renderPriceSection.push(renderFreeToPlayTitle); 
    } 

} 

... 
return(
    <ul> 
     {renderPriceSection.map((eachPrice) => <li>eachPrice</li>)} 
    </ul> 
)