0

我无法从 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 标记的记录的方法。

在此处输入图像描述

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

4

2 回答 2

1

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

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

编辑：由于您将 state.hits 初始化为 []，因此 state.hits.comments 最初将是未定义的。曾经检查过 hits.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'

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

于 2019-02-20T13:27:10.007 回答
1

尝试：

...

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

...
于 2019-02-20T13:36:29.813 回答