反應陣列

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

我想展示一些標籤中只顯示最後一個項目：Owned，$Price，Free反應陣列

的console.log顯示了所有正確的遊戲應該有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次，每個項目。
所以，現在我在錯誤的輸出對面:)）

來源

2017-08-25 Cristian Muscalu

發生這種情況的原因是renderPriceSection在每次映射迭代時都被覆蓋。此外，這不是一個正確的方式來使用地圖，地圖返回一個數組，如果你顯示你的數組看起來像什麼和你的預期輸出可能我們可以更好地幫助 –

由於標籤只顯示最後一個項目，我想着同樣的事情。它覆蓋了它。但想不到更好的方式來做到這一點。 –

我使用'map'而不是for循環。我更新了這個問題。 –

Array.map返回另一個數組。看起來你不會在map函數中返回任何東西。此外，還不清楚renderPriceSelection應該是什麼。

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

render {renderPriceSelection}

來源

2017-08-25 09:49:32 mersocarlin

'renderPriceSection'只是一個最終的可變價值，它將呈現價格，免費或自有品牌。我試圖以非常小的比例複製。 –

使用與我之前描述的方式類似的地圖和'console.log（renderPriceSelection）'來檢查這是否是你想要的。 – mersocarlin

既然你對你正在改變同一對象每隔一個循環修改的renderPriceSection相同的參考，你是不是創建一個新的。

來源

2017-08-25 09:54:26 bluehipy

從這個代碼是不完全清楚，但在我看來，你改寫在每次迭代變量renderPriceSection，這就是爲什麼renderItems每次返回的最後一個元素

來源

2017-08-25 09:54:41

您存儲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> 
)

來源

2017-08-25 10:08:26 mindaJalaj

回答

相關問題