useEffect () для многих повторных визуализаций на нумерации страниц

Question

import React, {useEffect, useState} from 'react'
import api from '../../services/api'
import './styles.css'

export default function Main(){
    const [products, setProducts] = useState([])
    const [page, setPage] = useState(1)
    const [productsInfo, setProductsInfo] = useState({})

    useEffect(() => {
        async function fetchData() {
            const response = await api.get(`/?page=${page}`)

            const {docs, ...info} = response.data

            setProductsInfo(info)
            setProducts(docs)
        }
        fetchData()
    }, [page])

    function prevPage() {
        if(page > 1) setPage(page - 1)
    }

    function nextPage() {
        if(page < productsInfo.pages) setPage(page + 1)
    }

    return(
        <div className='products-list'>
            {console.log(products)}
            {products.map(product => (
                <article key={product._id}>
                    <strong>{product.title}</strong>
                    <p>{product.description}</p>

                    <a href="#">Access</a>
                </article>
            ))}
            <div className="actions">
                <button onClick={prevPage()}>Previous</button>
                <button onClick={nextPage()}>Next</button>
            </div>
        </div>
    )
}

Это страница моего Приложения, которая извлекает данные API продукта (используя ax ios). Ответом является JSON с этой структурой:

{
  "docs": [
    {
    ####Product 1 info here###
    },
    {
    ###Product 2 info here###
    }
  ],
  "total": 19,
  "limit": 5,
  "page": "1",
  "pages": 4
}

Я просто хочу повторно выбрать и повторно отобразить продукты при изменении страницы, поэтому я передаю [page] в качестве аргумента useEffect ( ). Функции prevPage () и nextPage () обрабатывают изменение страницы.

По какой-то причине он возвращает ошибку: слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечность l oop.

Answer 1

Вызов как функция стрелки

<button onClick={() => prevPage()}>Previous</button>
<button onClick={() => nextPage()}>Next</button>