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

Question

У меня проблемы с отображением комментариев / результатов от 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 не является функцией".

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

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

Answer 1

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

попробуйте hit.comments.map и все будет хорошо

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

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

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

Для некоторых конечных точек вы устанавливаете ограничение, устанавливаете смещение равным 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, я могу ошибаться.

Answer 2

Пытаться :

...

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>
);
}

...