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。请帮忙

修改以下是SearchBar代码

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

您的服务器不仅可以响应所请求的标题，还可以响应下一个标题。这样，当你单击Next时，你可以立即显示下一部电影而无需等待响应，同时仍然在后台按名称或id查询它（这样你就有了下一部电影等）。

编辑：如果我误解了你的意思并且你已经拥有了这个（看起来你实际上是在同一时间查询整页电影），你可能只想要像

这样的东西

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

并特别处理您点击页面上最后一项时的情况。

React.js继续下一个列表

1 个答案: