在React.js中傳遞輸入中的值以進行分頁

Question

我試圖在react 16項目上創建一個非常簡單的分頁功能，我的想法只是將按鈕值傳遞給api查詢以獲取“＆page =”數字並導航到第二頁，第三頁，依此類推。 我使用unsplash api消費圖片。 我認為“上一個，下一個”按鈕應該足夠了但是我找不到一個很好的方法去做很多改變。

我嘗試了一些我在這里找到的解決方案。 但它們都不適用於我的簡單想法。

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
import ItemList from './components/ItemList';
import Navigation from './components/Navigation';
import SearchImg from './components/SearchImg';
import Pagination from './components/Pagination';
import Footer from './components/Footer';

export default class App extends Component {
    constructor() {
    super();
    this.state = {
      imgs: [],
      loadingState: true
    };
}

componentDidMount() {
  this.performSearch();
}

performSearch = (query = 'guitar') => {
var pagi = [1]; // here is the variable I should pass the values to.


var headers = {
 'Authorization': 'Bearer xxxxxxxxxxxxxxxxxxxx'
}
axios({
method: 'GET',
url: 'https://api.unsplash.com/search/photos?page='+(pagi)+'&per_page=20&query='+(query), 

//(pagi) is where I want to pass the values


headers: headers,
}).then(data => {
this.setState({ imgs: data.data.results, loadingState: false });
})
.catch(err => {
console.log('Error happened during fetching!', err);
});

};

render() {
  return (
  <div className="container">
  <Navigation /> // This is just a hardcode html buttons navigation.

//maybe just adding two buttons, one for prev, one for next should be enough?.

  <div>
  <SearchImg onSearch={this.performSearch} />
  </div>
  {this.state.loadingState
  ? <p style={centrar}>Loading...</p>

  : <ItemList data={this.state.imgs} />}
    <Footer />
  </div>

  );
}
}

Answer 1

有兩件事

1. 為什么要將pagi創建為數組？ 無論你在這里提到什么，我相信pagi應該是一個數字。 所以相反

   var pagi = 1;

2. 在url中使用pagi和查詢的最佳方法是這樣做

   網址： https://api.unsplash.com/search/photos?page=${pagi}&per_page=20&query=${query} ： https://api.unsplash.com/search/photos?page=${pagi}&per_page=20&query=${query} page https://api.unsplash.com/search/photos?page=${pagi}&per_page=20&query=${query} per_page https://api.unsplash.com/search/photos?page=${pagi}&per_page=20&query=${query} query https://api.unsplash.com/search/photos?page=${pagi}&per_page=20&query=${query}

正如Amit所提到的，你應該看一下模板文字。