は、私はいくつかのラベルを表示しようとしている配列

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} 
) 

にのみ最後の項目が表示されている反応：

console.logFreeがすべて正しいのゲームを表示しているOwned、$Price、Ownedラベルを持つべきです。

ただし、Ownedラベルはowned_gamesアレイの最後のアイテムにのみ表示されます。

これはなぜ起こっているのですか？

---

編集：

私はrenderItems()機能を削除し、これで{renderPriceSection}を置き換え：

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

を今renderOwnedとrenderPriceは、各項目のowned_games.length回表示されています。
今私は間違った出力の反対側にいる:)）

Answer 1

Array.mapは別の配列を返します。 mapの機能の中に何も返されていないようです。また、renderPriceSelectionさんが何をすべきかは不明です。

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

render {renderPriceSelection} 

Answer 2

はあなたが同じオブジェクトを変更している他のすべての繰り返しでrenderPriceSectionの同じ参照を変更しているので、あなたは新しいものを作成していません。このコードから

Answer 3

それは完全には明らかではないが、あなたが各反復で変数renderPriceSectionを書き換えるように思われ、それはrenderItemsが最後の要素を返す理由たび

Answer 4

あなたはANの形でrenderPriceSelectionを格納します配列を以下のようにして、与えられた関数から値を返すときにこの配列をレンダリングします。ここではリスト要素として返しました。それが役に立てば幸い。

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> 
)