渲染价格或基于2个阵列拥有

Question

我有2个数组:all_games和owned_games.
我希望显示所有游戏,并在每个游戏旁边:
- 如果它是owned显示所有
- 如果它not owned显示价格

电流输出:
1 - 10.00
2 - 10.00
3 - 10.00

DesiredOutput:
1 - 拥有
2 - 拥有
3 - 10.00

CODEPEN

render() {
    let renderPriceSection
    let renderOwned = <span>Owned</span>
    let renderPrice = <span>10.00</span>
    let all_games = [{ "game_id": 1 }, { "game_id": 2 }, { "game_id": 3 }]
    let owned_games = [{ "game_id": 1 }, { "game_id": 2 }]

    all_games.map((game) => {
        owned_games.map((owned_game) => {
            owned_game.game_id === game.game_id ?
                renderPriceSection = renderOwned :
                renderPriceSection = renderPrice
        })
    })
    return (
        <div>
          {all_games.map((game)=>{
          return(
            <p>
              {game.game_id} - {renderPriceSection}
            </p>                
          )                
        })}                
        </div>
    )
}

Answer 1

你没有设置renderPriceSection游戏.您将它保存在单个变量中.所以每场比赛都会有相同的renderPriceSection.

您应该为每个游戏添加一个属性并保留其价格部分

all_games.map((game) => {
    game.renderPriceSection = owned_games.find((owned_game) => owned_game.game_id === game.game_id) !== undefined ? renderOwned : renderPrice;
})

然后在return语句中,您将从游戏中获得此属性

return (
    <div>
      {all_games.map((game)=>{
      return(
        <p>
          {game.game_id} - {game.renderPriceSection}
        </p>                
      )                
    })}                
    </div>
)

请参阅编辑过的CodePen