使用reactJs从jsonPlaceHolder假数据中选择前8行

Question

我想从jsonplaceholder api中选择前8张照片，然后使用reactjs获取它们实际上我正在使用axios，这是我的代码：

class App extends React.Component {

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/photos/`)
      .then(res => {
        const pictures = res.data;
        this.setState({
          pictures,
          loading: false,
          error: null
        });
      })
      .catch(err => {
        this.setState({
          loading: false,
          error: err
        });
      });
  }

  renderLoading() {
    return <div>Loading...</div>;
  }

  renderError() {
    return (
      <div>
        Something went wrong: {this.state.error.message}
      </div>
    );
  }

Answer 1

Api不提供限制返回记录数量的方法，因此您可以使用Array.prototype.slice(start, end)

仅保存所需数量的记录

componentDidMount() {
  axios.get(`https://jsonplaceholder.typicode.com/photos/`)
  .then(res => {
    const pictures = res.data.slice(0, 8);
    this.setState({
      pictures,
      loading: false,
      error: null
    });
  })
  .catch(err => {
    this.setState({
      loading: false,
      error: err
    });
  });
}

Answer 2

可以通过=>“ http://jsonplaceholder.typicode.com/photos?_start=0&_limit=5”来限制数据获取的简单方法 这意味着从0开始到5。