1

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

例如，如果我只想展示一个反应 gif 页面或一个有趣的猫 gif 页面，而无需用户输入。

此外，如果我想将这些结果按每页 10 个 gif 进行分页怎么办？

我一直无法在网上找到明确的答案，所以你们可以提供的任何帮助将不胜感激。先感谢您。

4

1 回答 1

3

您想设置一个不受用户控制的查询，获取这些结果并呈现它们。分页相当简单，使用API ( Docs )的limit和参数。offset

非常基本的例子：

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

于 2017-02-17T13:52:27.747 回答