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.