一遍又一遍地调用函数？

Question

I've got a Pagination component in NextJS which looks like:

import Pagination from 'react-bootstrap/Pagination';
import Router from "next/router";
import {useEffect} from "react";

export { Paging }

function Paging(props) {

    let pages = []

    const generatePages = () => {
        for (let page = 1; page <= props.paginator.totalPages; page++) {
            let url = `/${props.source}?page=${page}&per_page=${props.paginator.perPage}`
            console.log(url)
            pages.push(
                <Pagination.Item key={page} active={page == props.paginator.page } onClick={() => Router.push(url)}>
                    { page }
                </Pagination.Item>
            );
        }
    }

    generatePages();

    return (
        <div id="pagination">
            <div className={"pagination-component"}>
            <Pagination>
                { props.paginator.prevPage != null &&
                    <Pagination.Prev onClick={() => Router.push(props.paginator.prevPage)} />
                }

                { pages }

                { props.paginator.nextPage != null &&
                    <Pagination.Next onClick={() => Router.push(props.paginator.nextPage)}/>
                }
            </Pagination>
            </div>
            <div className={"total-pages"}>
                Showing {props.paginator.perPage} out of { props.paginator.totalCount }
            </div>
        </div>
    )
}

this works fine. The pagination is rendered and working as expected:

but when I open the web inspector I see that this statement console.log(url) which is declared in the generatePages function is printed over and over again, which leads me to think that my component is being rendered over and over again.

I added then:

useEffect(() => {
        generatePages();
    }, []);

and removed the call to generatePages(); that I had before the return statement. That stoped the message printing from appearing multiple times but now the pages on my component are not being displayed:

I tried passing pages array as dependency to useEffect but that didn't make any difference.

Any ideas what's going on?

EDIT

For debugging purposes I've completely removed generatePages and updated my return value to be:

return (
        <div id="pagination">
            <div className={"pagination-component"}>
            <Pagination>
                { props.paginator.prevPage != null &&
                    <Pagination.Prev onClick={() => Router.push(props.paginator.prevPage)} />
                }

            { console.log('here') }

                { props.paginator.nextPage != null &&
                    <Pagination.Next onClick={() => Router.push(props.paginator.nextPage)}/>
                }
            </Pagination>
            </div>
            <div className={"total-pages"}>
                Showing {props.paginator.perPage} out of { props.paginator.totalCount }
            </div>
        </div>
    )

as you can see I'm just creating the component with whatever data is passed via props and added { console.log('here') } to the return to see whether the component was being rendered multiple times from the parent component. That seems to be the case. I was expecting to see here printed only once but it's being printed infinitely.

The parent component where Paging is being used is:

import Table from 'react-bootstrap/Table';
import { HiOutlineTrash, HiOutlinePencil } from "react-icons/hi";
import { getAllGenres } from "../../api/genre";
import Link from 'next/link'
import Button from "react-bootstrap/Button";
import useStore from "../../stores";
import Alert from "react-bootstrap/Alert";
import { Paging } from "../../components/Pagination";

export default function Genres({ genres, pagination }) {

    const alerts = useStore((state) => state.alerts)
    const removeAllAlerts = useStore((state) => state.removeAllAlerts);

    const setShow = (show=false) => {
        removeAllAlerts();
    }

    // automatically close any open alerts after 10 seconds
    (() => setTimeout(setShow, 10000))();

    return (
        <>
            { alerts.length > 0 &&
            <Alert variant="success" onClose={() => setShow(false)} dismissible>
                <p>
                    { alerts[0] }
                </p>
            </Alert>
            }

            <div className={"page-title-section"}>
                <h2 className={"page-title"}>Genres</h2>
                <div className={"add-new-top"}>
                    <Link href={"/genres/new"}>
                        <Button variant="dark">Add New Genre</Button>
                    </Link>
                </div>
            </div>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Parent</th>
                    <th>Active</th>
                    <th>Created At</th>
                    <th/>
                </tr>
                </thead>
                <tbody>
                { genres.data && genres.data.map(genre => (
                    <tr key={genre.id}>
                        <td>
                            <Link href={`/genres/${genre.slug}`}>
                                { genre.name }
                            </Link>
                        </td>
                        <td>{ genre.description }</td>
                        <td>{ genre.parent }</td>
                        <td>{ genre.active ? "Yes" : "No" }</td>
                        <td>{ genre['created_at'] }</td>
                        <td>
                            <Link href={"/"}>
                                <a className={"action-btn edit-btn"}><HiOutlinePencil /></a>
                            </Link>
                            <Link href={"/"}>
                                <a className={"action-btn remove-btn"}><HiOutlineTrash /></a>
                            </Link>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Table>

            <Paging paginator={pagination} source={"genres"} />
        </>
    )
}

/**
 * getServerSideProps gets all server side data before the page actually loads
 * @returns {Promise<{props: {genres: void}}>}
 */
export const getServerSideProps = async (context) => {

    // extract from query params in context data needed for pagination
    const page = context.query.page;
    const perPage = context.query.perPage;

    let genres = {}
    const res = await getAllGenres(page, perPage);

    if (res.data !== undefined) {
        genres = res.data
    }

    // build pagination object
    let pagination = {
        totalPages: res.data["total_pages"],
        totalCount: res.data["total_count"],
        perPage: res.data["per_page"],
        page: res.data["page"],
        nextPage: res.data["next_page_link"],
        prevPage: res.data["prev_page_link"],
    }

    return {
        props: {
            genres,
            pagination,
        }
    };
};

it is just a simple table with the Paging component, but I can't figure out what's causing the multiple rendering of Paging .

But it's confusing me a lot at the moment is that I'm getting two sets of results: On one hand I've got the output in Chrome Dev Tools which keeps printing the message over and over:

on the other I've got my terminal open, which is also printing the message, but it only prints it twice:

which one is correct?

Answer 1

尝试完全删除依赖数组，这样useEffect就没有第二个参数

Answer 2

您应该将pages存储在状态中，并且只在挂载时调用generatePages 。