javascript - 按钮 onClick 方法在 react 应用程序中不起作用

Question

这是示例主页的 react 代码。我想让它在单击按钮时运行该功能，然后更新页面。但相反，它一直发出警报。 我已经确认 fetch 确实是从 API 中提取数据，但是 onClick 是不起作用的那个。

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import Movie from './movieoutline/samplemovie';
import './Home.css';
import { Button, ButtonToolbar } from 'react-bootstrap';
import * as FaIcons from 'react-icons/fa';


export class Home extends Component {

    constructor(props) {
        super(props);
        this.state = { movies: [], page:1, maxpage:0 }
    }

    refreshlist() {
        let _page = this.state.page;
        const sort = "popularity.desc";
        const apikey = process.env.REACT_APP_TMDB_APP_KEY;
        const url = "https://api.themoviedb.org/3/discover/movie?api_key=" + apikey + "&language=en-US&sort_by=" + sort + "&include_adult=false&include_video=false&page="+_page+"&with_watch_monetization_types=flatrate";
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({ movies: data.results, page:data.page, maxpage:data.total_pages});
                console.log(this.state);
            })
    }

    componentDidMount() {
        this.refreshlist();
    }

    componentDidUpdate() {
        this.refreshlist();
    }

    fowardbtn(){
        if(this.state.page == this.state.maxpage ){
            return true;
        } else{
            return false;
        }
    }

    backwardbtn(){
        if(this.state.page == 1 ){
            return true;
        } else{
            return false;
        }
    }

    render() {
        const { movies } = this.state;
        return (
            <Container maxWidth="xl" id="testApp">
                <div className="foward">
                    <Button className='fowardbtn' variant='primary' onClick = {
                        this.fowardbtn() 
                        ? 
                        alert("This is the last page")
                        :
                        this.setState({page: this.state.page+1}), this.refreshlist()
                        }>
                        <FaIcons.FaChevronCircleRight className='movie-icons' />
                    </Button>
                </div>
                <div className="backward">
                    <Button className='backwardbtn' variant='primary' onClick = {
                        this.backwardbtn() 
                        ? 
                        alert("This is the first page")
                        :
                        this.setState({page: this.state.page-1}), this.refreshlist()
                        }>
                        <FaIcons.FaChevronCircleLeft className='movie-icons' />
                    </Button>
                </div>
                <div className='item container-fluid d-flex justify-content-center'>
                    <Grid container spacing={2} direction="row" justifyContent="center" alignItems="center">
                        {movies.map(movie =>
                            <Grid item lg={2} md={3} sm={4} xs={5}>
                                < Movie movie={movie} />
                            </Grid>
                        )}
                    </Grid>
                </div>
            </Container>
        );
    }
}

编辑:

当我删除警报代码时，它给出了一个未处理的拒绝错误，说一个组件调用 setState 方法的频率太高。

Answer 1

请试试这个。

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import Movie from './movieoutline/samplemovie';
import './Home.css';
import { Button, ButtonToolbar } from 'react-bootstrap';
import * as FaIcons from 'react-icons/fa';


export class Home extends Component {

    constructor(props) {
        super(props);
        this.state = { movies: [], page:1, maxpage:0 }
    }

    refreshlist() {
        let _page = this.state.page;
        const sort = "popularity.desc";
        const apikey = process.env.REACT_APP_TMDB_APP_KEY;
        const url = "https://api.themoviedb.org/3/discover/movie?api_key=" + apikey + "&language=en-US&sort_by=" + sort + "&include_adult=false&include_video=false&page="+_page+"&with_watch_monetization_types=flatrate";
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({ movies: data.results, page:data.page, maxpage:data.total_pages});
                console.log(this.state);
            })
    }

    componentDidMount() {
        this.refreshlist();
    }

    componentDidUpdate() {
        this.refreshlist();
    }

    fowardbtn(){
        if(this.state.page == this.state.maxpage ){
            return true;
        } else{
            return false;
        }
    }

    backwardbtn(){
        if(this.state.page == 1 ){
            return true;
        } else{
            return false;
        }
    }

    render() {
        const { movies } = this.state;
        return (
            <Container maxWidth="xl" id="testApp">
                <div className="foward">
                    <Button className='fowardbtn' variant='primary' onClick = {
                        this.fowardbtn() 
                        ? 
                        () => alert("This is the last page")
                        :
                        () => {
                            this.setState({page: this.state.page+1}); 
                             this.refreshlist();
                             }
                        }>
                        <FaIcons.FaChevronCircleRight className='movie-icons' />
                    </Button>
                </div>
                <div className="backward">
                    <Button className='backwardbtn' variant='primary' onClick = {
                        this.backwardbtn() 
                        ? 
                        () => alert("This is the last page")
                        :
                        () => {
                            this.setState({page: this.state.page-1}); 
                             this.refreshlist();
                             }
                        }>
                        <FaIcons.FaChevronCircleLeft className='movie-icons' />
                    </Button>
                </div>
                <div className='item container-fluid d-flex justify-content-center'>
                    <Grid container spacing={2} direction="row" justifyContent="center" alignItems="center">
                        {movies.map(movie =>
                            <Grid item lg={2} md={3} sm={4} xs={5}>
                                < Movie movie={movie} />
                            </Grid>
                        )}
                    </Grid>
                </div>
            </Container>
        );
    }
}