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

和当你击中页面上的最后一个项目时特别处理这种情况。