javascript - 渲染价格或拥有基于 2 个数组

Question

我有 2 个数组:all_games 和 owned_games。
我想显示所有游戏，并在每个游戏旁边显示:
- 如果它是 owned 则显示 owned
- 如果它是未拥有 显示价格

当前输出:
1 - 10.00
2 - 10.00
3 - 10.00

期望输出:
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 (
    <div>
      {all_games.map((game)=>{
      return(
        <p>
          {game.game_id} - {game.renderPriceSection}
        </p>                
      )                
    })}                
    </div>
)

查看编辑后的 ​​CodePen