React.js移動到下一個列表

Question

我正在製作電影搜索頁面。當我搜索某些內容時，它會遍歷數據庫並找到第一個匹配項並顯示在頁面上。不過，我想創建一個函數，所以當我點擊下一頁時，頁面會顯示數據庫中的下一部電影。我的代碼如下：

import React, { Component, PropTypes } from 'react'; 
import SearchBar from './Bar/index.js'; 
import SearchResult from './Result/index.js'; 
import axios from 'axios'; 

import './index.css'; 

class SearchArea extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      searchText: '', 
      searchResult: {}, 
      result: false, 
      count: 0 
     }; 
    } 

    handleSearchBarChange(event) { 
     this.setState({searchText: event.target.value}); 
    } 

    handleSearchBarSubmit(event) { 
     event.preventDefault(); 

     const movie = this.state.searchText; 
     axios.get(`https://api.themoviedb.org/3/search/movie?api_key=c6cd73ec4677bc1d7b6560505cf4f453&language=en-US&query=${movie}&page=1&include_adult=false`) 
     .then(response => { 
      if(response.data.results.length >= 0) { 
       const i = 0; 
       const { 
        title, 
        overview, 
        release_date: releaseDate 
       } = response.data.results[this.state.count]; 

       const posterPath = 'https://image.tmdb.org/t/p/w154' + response.data.results[this.state.count].poster_path; 

       this.setState({ 
        searchResult: { 
         title, 
         posterPath, 
         overview, 
         releaseDate 
        }, 
        result: true 
       }); 
      } 
      else { 
       this.setState({ 
        searchResult: { 
         title: 'No Result', 
         overview: 'No Overview Available', 
         posterPath: '' 
        }, 
        result: true 
       }); 
      } 
     }) 
    } 

    handleSearchNext(event) { 
     this.handelSearchBarSubmit.overview = response.data.results[1]; 
    } 

    handleResultClose() { 
     this.setState({ 
      searchResult: {}, 
      result: false 
     }); 
    } 

    render() { 
     return (
      <div> 
       <SearchBar 
       value = {this.state.searchText} 
       onChange = {this.handleSearchBarChange.bind(this)} 
       onSubmit = {this.handleSearchBarSubmit.bind(this)} 
       onNext = {this.handleSearchNext.bind(this)} 
       /> 
       {this.state.result && 
       <SearchResult 
       searchResult = {this.state.searchResult} 
       onClose = {this.handleResultClose.bind(this)} 
       onAdd = {this.props.onAdd} 
       /> 
       } 
      </div> 
     ); 
    } 
} 

SearchArea.propTypes = { 
    onAdd: PropTypes.func.isRequired 
}; 

export default SearchArea; 

我似乎無法弄清楚如何使handleSearchNext。請幫助

編輯 下面是搜索欄代碼

import React, { PropTypes } from 'react'; 
import { Button } from 'semantic-ui-react'; 
import styles from './index.css'; 

const SearchBar = (props) => { 
    return (
     <div> 
      <form onSubmit={(event) => props.onSubmit(event)}> 
       <input 
        className="searchBar" 
        type="text" 
        placeholder="Search Here" 
        value={props.value}this 
        onChange={(event) => props.onChange(event)} 
        onNext={(event) => props.onChange(event)} 
        onBack={(event) => props.onChange(event)} 
       /> 
       <Button className="button" type="submit">Sumbit</Button> 
      </form> 
      <Button className={styles.button} type="previous">Back</Button> 
      <Button className="button" type="next">Next</Button> 
     </div> 
    ); 
}; 

SearchBar.propTypes = { 
    value: PropTypes.string.isRequired, 
    onChange: PropTypes.func.isRequired, 
    onSubmit: PropTypes.func.isRequired, 
    onBack: PropTypes.func.isRequired, 
    onNext: PropTypes.func.isRequired 
}; 

export default SearchBar; 

Answer 1

你可以有不僅請求的標題，而且下一個服務器響應。這樣，當您點擊下一步時，您可以立即顯示下一部電影而不用等待迴應，同時仍然通過名稱或ID在後臺查詢它（以便您可以在後面查找下一部電影等）。

編輯：如果我誤解你的意思，你已經有這個（它看起來像你實際上是在一次查詢電影的一整頁），你可能只是想類似

handleSearchNext(event) { 
    this.setState({ searchResult: response.data.results[1], result: true }); 
} 

和當你擊中頁面上的最後一個項目時特別處理這種情況。