Комментарии к карте от Twitch API - React - PullRequest
Новая
       53

Комментарии к карте от Twitch API - React

0 голосов
/ 20 февраля 2019

У меня проблемы с отображением комментариев / результатов от Twitch API.Я получаю TypeError, когда пытаюсь отобразить, и результаты, сохраняемые из API, ограничены 60 записями, и я не могу найти способ продолжить отображение этого.

Ниже мой компонент, которыйобработка вызова API и сопоставление ... 

import React from 'react';
import ReactDOM from 'react-dom';

class Twitch extends React.Component{

 constructor(props){
  super(props);
  this.state = {
    cid : 'XXXXXXXXXXXXX',
    api : 'https://api.twitch.tv/v5/videos/XXXXXXX/comments?client_id=' + this.state.cid,
    hits : []
  }
 }

 componentDidMount() {
  fetch(this.state.api, {
    method: 'get',
    headers: {"Client-ID": this.state.cid}
  })
  .then((response) => response.text())
   .then((responseText) => {
     this.setState({hits : (JSON.parse(responseText))})
    })
  }

 render(){
  const { hits } = this.state;
  console.log({hits});

  return (
   <ul>
     {hits.map(hit =>
      <li>
        <p>{hit.content_type}</p>
      </li>
     )}
   </ul>
  );
 }
}

Я получаю следующий результат в моей консоли, который хорош, но когда я пытаюсь отобразить, я получаю ошибку "TypeError: hit.map isне функция ".

enter image description here

Кроме того, результаты, которые я получаю из API-интерфейса Twitch, всегда ограничены 60 записями и затем имеют _nextполе внизу.Кажется, я не могу найти способ продолжить отображение записей после отметки 60.

enter image description here

Любая помощь будет принята с благодарностью.Спасибо!

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

попробуй: 

...

render(){
const { hits } = this.state;
console.log({hits});

return (
 <ul>
   { hits && hits.comments && hits.comments.length !== 0 ?
         hits.comments.map(hit =>
           <li>
             <p>{hit.content_type}</p>
           </li>
         )
      :
         <div>/* something to describe what is wrong or some loading */</div>
   }
 </ul>
);
}

...
0 голосов
/ 20 февраля 2019

hit.map не является функцией, потому что в соответствии с выводом вашей консоли массив находится под hit.comments

try hit.comments.map и все должно быть в порядке

edit: так как вы инициализируете state.hits как [], state.hits.comments изначально не будет определен.Когда-либо проверяете прецеденты hit.comments или изменяете свое первоначальное значение:)

относительно 60 заглавных букв, это, кажется, связано с механизмом разбиения на страницы из API, задокументированным здесь https://dev.twitch.tv/docs/v5/#requests

Пейджинг по результатам: курсор против смещения При извлечении нескольких элементов существует два разных механизма для просмотра результатов: смещение и курсор.

Для некоторых конечных точек вы устанавливаете ограничение, устанавливаете смещение на 0 идобавляйте предельное значение к значению смещения каждый раз, когда вы хотите увидеть следующую страницу.

Для других конечных точек смещение не рекомендуется;вместо этого курсор возвращается.Это используется для указания серверу, с чего начать выборку следующего набора результатов.

, который является довольно стандартным форматом для разбивки на страницы, то есть вам придется самостоятельно запрашивать последовательные фрагменты из 60 элементов.правильная установка атрибута смещения (или курсора, похоже, здесь есть некоторая несогласованность)

сначала вы можете попытаться установить более высокий предел, например попробуйте 

api : 'https://api.twitch.tv/v5/videos/XXXXXXX/comments?client_id=' + this.state.cid + '&limit=100'

, и он должен вернуть 100значения вместо 60

, затем попросите 100 затем, используя 

api : 'https://api.twitch.tv/v5/videos/XXXXXXX/comments?client_id=' + this.state.cid + '&limit=100&offset=100'

примечание: я никогда не использовал API-интерфейс twitch, я могу ошибаться.

...