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：hits.map不是函数”。

此外，我从Twitch API获得的结果总是以60条记录为上限，然后在底部有一个“ _next”字段。我似乎找不到找到继续映射超过60标记的记录的方法。

任何帮助将不胜感激。谢谢！

Answer 1

hits.map不是函数，因为根据您的控制台输出，数组位于hits.comments

下

尝试 hits.comments.map ，应该没问题

edit：由于您将state.hits初始化为[]，因此state.hits.comments最初将是未定义的。曾经检查hits.comments的准确性或更改您的初始值：）

关于60个大写字母，这似乎是API的分页机制所造成的，https://dev.twitch.tv/docs/v5/#requests

分页显示结果：游标与偏移量提取多个项目时，   有两种不同的机制可以分页显示结果：偏移量和   光标。

对于某些端点，您可以设置一个限制，将offset设置为0，然后添加   每次要查看下一个时，将极限值限制为偏移值   页面。

对于其他端点，不建议使用offset；相反，游标是   回到。这用于告诉服务器从哪里开始获取   下一组结果。

这是分页的一种非常标准的格式，这意味着您将不得不通过正确设置offset属性（或光标，这里似乎有些矛盾）来要求连续60个项目块。

首先，您可以尝试设置更高的限制，例如try

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'

注意：我从未使用过twitch API，我可能是错的。

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

...

来自Twitch API的地图评论-React

2 个答案: