Блог

У меня есть массив состояний под названием «сделки», который содержит данные, аналогичные приведенным ниже; Я хочу сделать запрос к другому API и добавить значение из ответа в массив состояний сделок, только если оно соответствует определенному условию.

Например;

Добавляйте только header_image значение, которое я получаю из ответа на объект в массив deals состояний, но только если массив deals состояний имеет значение isSteam=true

Текущий

 [
 {
      "added":1567049314,
      "drm":[
         "steam"
      ],
      "expiry":1567443600,
      "game_code":"224280",
      "isSteam":true,
      "plain":"rpgmakervxacelite",
      "price_cut":80,
      "price_new":13.99,
      "price_old":69.99,
      "shop":{
         "id":"steam",
         "name":"Steam"
      },
      "title":"RPG Maker VX Ace Lite",
      "urls":{
         "buy":"https://store.steampowered.com/app/224280/",
         "game":"https://isthereanydeal.com/game/rpgmakervxacelite/info/"
      }
   }
 ---More Data---
 }
]
  

Ожидается

 [
     {
          "added":1567049314,
          "drm":[
             "steam"
          ],
          "expiry":1567443600,
          "game_code":"224280",
          "isSteam":true,
          "game_image": "https://steamcdn-a.akamaihd.net/steam/apps/224280/header.jpg?t=1540461421",
          "plain":"rpgmakervxacelite",
          "price_cut":80,
          "price_new":13.99,
          "price_old":69.99,
          "shop":{
             "id":"steam",
             "name":"Steam"
          },
          "title":"RPG Maker VX Ace Lite",
          "urls":{
             "buy":"https://store.steampowered.com/app/224280/",
             "game":"https://isthereanydeal.com/game/rpgmakervxacelite/info/"
          }
       },
      ---More Data---
     }
    ]
  

У меня есть следующая функция, в которой я делаю запрос и хочу добавить результат к каждому объекту в моем массиве состояний при условии, например, где ‘IsSteam= true’

 getGameImage = () => {
      for (var key in this.state.deals) {
        if (this.state.deals[key]['isSteam']) {
          // Get Images
          axios.get('https://store.steampowered.com/api/appdetails?appids='   this.state.deals[key]['game_code'])
          .then((response) => {
            var parsedData = JSON.parse(response['request']['_response'])
            for(var key in parsedData) {
              var result = this.state.deals.map(function(el) {
                var o = Object.assign({}, el);
                if(o['isSteam']) {
                  o.game_image = parsedData[key]['data']['header_image'];
                }
                return o;
                })
                this.setState({deals: result});
                console.log(result)
             }
            }).catch((err) => {
              console.log(err)
          })
          }        
       }
    }
  

Проблема в том, что; он добавляет URL-адрес изображения только к объектам, где IsSteam=true , но добавляет тот же URL-адрес изображения (вероятно, самый первый, который он получает) ко всем объектам, где isSteam=true .

Я хочу, чтобы для каждой игры отображался правильный URL-адрес изображения, а связь между моим текущим массивом сделок и ответом от API — это код игры.

Решение

 getGameImage = async () => {
      for(var key in this.state.deals) {
        let duplicateArray = [...this.state.deals]
        if(this.state.deals[key]['isSteam']) {     
          await this.setGameImage(this.state.deals[key]['game_code'])
          duplicateArray[key].game_image = this.state.imageUrl;
        }
        else {
          duplicateArray[key].game_image = 'https://i.ytimg.com/vi/mYrKAMLbjYA/maxresdefault.jpg';
        }
        this.setState({deals: duplicateArray});
      }
      }