React 组件不断重新渲染

Question

在我的页面中，我在 useEffect 中调用了一个操作来填充我的减速器。我有一个名为 page 的组件级别状态，它是操作中的一个参数。因此，每次page 的值发生变化时，我都希望再次调用该操作，因为显然我打算从不同的页面获取数据。

遗憾的是，我在控制台中遇到错误，告诉我组件已达到其重新渲染次数的限制。

以下是相关代码：

const Home = props => {

    const [page, setPage] = useState(1);

    useEffect(() => {
        props.getPopularMovies(page);
    }, [page])

我的props.getPopularMovies 函数来自我的mapDispatchToProps 函数，该函数被传递到connect()

整个主页：

import React, { useEffect, useState } from 'react'
import { connect } from "react-redux";

// Actions
import { getPopularMovies } from "../actions/movies.action";

const Home = (props) => {

    const [page, setPage] = useState(1);

    useEffect(() => {
        props.getPopularMovies(page);
    }, [page])

    return (
        <div>
            {props.movies && props.movies.length > 0 && props.movies.data.results.map(movie => (
                <p key={movie.id}>{movie.title}</p>
            ))}
            <button onClick={setPage(page + 1)}>Next Page</button>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        movies: state.movies.movies
    }
}

export default connect(mapStateToProps, {
    getPopularMovies
})(Home)

动作文件：

import axios from "axios";
import { GET_MOVIES_FAIL, GET_MOVIES_SUCCESS } from "../constants/movies.constants"

export const getPopularMovies = (page) => async (dispatch) => {
    try {
        const config = {
            params: {
                api_key: process.env.REACT_API_KEY,
                page
            
            }
        };

        const movies = await axios.get('/movie/popular', config);

        dispatch({
            type: GET_MOVIES_SUCCESS,
            payload: movies
        })
    } catch (err) {
        dispatch({
            type: GET_MOVIES_FAIL,
            payload: err
        })
    }
}

Answer 1

当您将方法 setPage 作为事件处理程序分配给 onClick 事件时，您是在调用它而不是分配它。所以，而不是这个：

<button onClick={setPage(page + 1)}>Next Page</button>

试试这个：

<button onClick={() => setPage(page + 1)}>Next Page</button>