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（使用 axios）。响应是具有以下结构的 JSON：

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

我只想在页面更改时重新获取并重新呈现产品，所以我将 [page] 作为 useEffect() 的参数传递。函数 prevPage() 和 nextPage() 处理页面更改。

由于某种原因，它返回错误：重新呈现太多。 React 限制渲染次数以防止无限循环。

Answer 1

作为箭头函数调用

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

useEffect() 在分页时多次重新渲染

useEffect() to many re-renders on pagination

javascript

frontend

reactjs

use-effect

use-state