Question

所以，我现在正在使用React为每个作业构建一个简单的应用程序。现在，我知道你可以根据用户输入的搜索结果渲染一堆gif，但是我如何只渲染我选择的特定结果呢？

例如，如果我只是想在没有用户输入的情况下呈现一页反应GIF或一页有趣的猫咪GIF。

此外，如果我想用一个页面的10个gif来分页这些结果怎么办？

我一直无法在网上找到明确的答案，所以任何帮助你们都可以呈现的内容将不胜感激。提前谢谢。

Answer 1

您希望设置一个不受用户控制的查询，获取这些结果并进行渲染。分页相当简单，使用API的limit和offset参数（Docs）。

非常基本的例子：

＆＃13;

class Category extends React.Component {
  constructor() {
    super();
    this.state = { data: [], paginate: 0 };
    this.fetchNextPage = this.fetchNextPage.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(`https://api.giphy.com/v1/gifs/search?q=${this.props.query}&limit=${this.props.limit}&offset=${this.state.paginate}&api_key=dc6zaTOxFJmzC`)
      .then(res => res.json())
      .then(data => this.setState({ data: data.data }));
  }

  fetchNextPage() {
    this.setState({
      paginate: this.state.paginate + this.props.limit
    }, () => this.fetchData());
  }

  render() {
    return (
      <div>
        <button onClick={this.fetchNextPage}>Next Page</button><br />
        {this.state.data.map(gif => (
            <img
              key={gif.id}
              src={gif.images.fixed_width_small.url}
            />
          ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Category query="cats" limit={10} />,
  document.getElementById("View")
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

＆＃13;

如何使用Giphy API呈现特定结果？

1 个答案: