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

我试图显示一些标签：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次。
所以现在我在错误输出的对立面上:)）））

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

以下面的方式存储 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>
)

react仅显示数组中的最后一项

4 个答案: