React Ax ios - JSON Получить ответ не отображается от render () - Riot API - PullRequest
Новая
       11

React Ax ios - JSON Получить ответ не отображается от render () - Riot API

0 голосов
/ 04 февраля 2020

Я начинаю учиться Реагировать пару дней go и Топор ios сегодня. Я провел последние 4 с лишним часа, просматривая / читая учебники, и я просто не могу этого понять.

Я пытаюсь создать простой веб-сайт статистики для League of Legends, используя Riot's API . Ниже вы можете увидеть мой конструктор, componentDidMount и функции рендеринга. Я чувствую, что я делаю 1 из 3 неправильно или, скорее всего, все 3. Я звоню this Get , который возвращает JSON ниже. Я хочу получить доступ к "name" и "accountId". 

{
  "profileIconId": 3270,
  "name": "Doublelift",
  "puuid": "SrvIz_3Xa05InF_hTjwq1v8iB6lqNXz0SEc_5vhOFYlScrZOg8pSM9Si_UdPGAD9UYGhaRWHBeBGrw",
  "summonerLevel": 155,
  "accountId": "iNc_SUPKq-ckcANeC36Yn18Y0XSofK3ShBQg_h5wivC0Bg",
  "id": "DjnxZhsTjgNhv3sMZMMJjlCUqAskiMfP6bP7GIcWovbwR1k",
  "revisionDate": 1580499454000
}

Я должен заметить, что мой ключ API установлен по умолчанию. Он хранится в моем файле индекса. js. Это безопасно? 

axios.defaults.headers.common['Authentication'] = 'API-Key-randomlettersandnumbers';

Вот мой код. В render (), когда я набираю summonerDetail.[field], он распознает поля, показанные в ответе JSON выше. Может быть, мой рендер неправильный, поэтому он не отображается? И да, я знаю, что "accountID" не в моем рендере. Я решил начать с малого только с «имени». В конечном счете мне нужно будет использовать «accountID» для другого Get. 

    import React from 'react';
    import axios from 'axios';

    export default class GetBySummonerName extends React.Component {

      constructor(props){
        super(props);
        this.state = {
          summonerDetails: []
        };
      }

      // https request to perform Get
      componentDidMount() {
        axios.get('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/doublelift')
          .then(res => {
            console.log(res);
            this.setState({ summonerDetails: res.data});
          })
      }

      render() {
        return (
            <div>
              { this.state.summonerDetails.map(summonerDetail => <h1>{summonerDetail.name}</h1>)}
            </div>
        )
      }
    }

Чтобы отобразить «name» на веб-сайте, я импортирую вышеуказанный класс в App. js. Единственная проблема - это не работает. У меня есть console.log (res); в моем ComponentDidMount (), но я не знаю, как просмотреть консоль в Atom. Мне не нужны какие-либо заголовки в моей componentDidMount (), потому что «summonerName» находится в Get URL. Остальные заголовки автоматически генерируются на стороне Riot. Пожалуйста, помогите:)

Ответы [ 2 ]

2 голосов
/ 04 февраля 2020

Вам не нужно map. Если вы получаете объект, подобный следующему, в res.data

{
    "profileIconId": 3270,
    "name": "Doublelift",
    "puuid": "SrvIz_3Xa05InF_hTjwq1v8iB6lqNXz0SEc_5vhOFYlScrZOg8pSM9Si_UdPGAD9UYGhaRWHBeBGrw",
    "summonerLevel": 155,
    "accountId": "iNc_SUPKq-ckcANeC36Yn18Y0XSofK3ShBQg_h5wivC0Bg",
    "id": "DjnxZhsTjgNhv3sMZMMJjlCUqAskiMfP6bP7GIcWovbwR1k",
    "revisionDate": 1580499454000
}

Затем замените его в своем выражении возврата. 

<div>{ this.state.summonerDetails.name }</div>

Надеюсь, это работает для вас.

0 голосов
/ 04 февраля 2020

Вы можете проверить ответ вашего API на вкладке сети или console.log вашей переменной состояния this.state.summonerDetails в методе рендеринга. Если получаемый вами ответ является объектом, вам не нужно отображать его. Если это массив, то вы должны перебрать его, используя map и извлечь свойство name.

...