在React中每页显示10个事件并分页

Question

我试图在React中每页显示10个事件。我有一个叫做Events的视图和一个叫做EventsList的组件。这是以下代码：

src/views/Events/index.jsx

import React, { useEffect, useState } from 'react';
import Events from '../../components/EventsList';
import Navbar from '../../components/Navbar';
import { getEvents } from '../../services';
import Spinner from '../../components/Spinner';
const Event = (props) => {
const [error, setError] = useState(false);
const [data, setData] = useState([]);
const [items, setItems] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [page, setPage] = useState(1);
const EVENTS_PER_PAGE = 10;
const firstPage = page * EVENTS_PER_PAGE;
const lastPage = firstPage - EVENTS_PER_PAGE;
useEffect(() => {
getEvents()
.then(function (response) {
setData(response.data);
})
.catch(function (error) {
setError(error);
})
.finally(function (response) {
setIsLoading(false);
});
}, []);
useEffect(() => {
setItems(data.events?.splice(lastPage, firstPage));
}, [data]);
const nextPage = () => {
setPage(page === data.length / EVENTS_PER_PAGE ? page : page + 1);
console.log('FIRST SPLICE:', firstPage + 1);
console.log('SECOND SPLICE:', items.length + EVENTS_PER_PAGE - 1);
};
const prevPage = () => {
setPage(page === 1 ? page : page - 1);
};
if (isLoading) {
return <Spinner />;
}
return isLoading ? (
<Spinner />
) : (
<>
<Events
nextPage={nextPage}
prevPage={prevPage}
defaultListLength={EVENTS_PER_PAGE}
defaultPage={page}
data={items}
/>
<Navbar title={'Eventos'} />
</>
);
};
export default Event;

src/components/EventsList/index.jsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import {
Container,
Header,
EventsText,
Rectangle,
SearchHeader,
FormInput,
IconContainer,
PaginateContainer,
ArrowContainer,
PaginateText,
Table,
TableHeader,
TableData,
TableDataText,
} from './styled';
import Button from '../Button';
import Icon from '../Icon';
import Spinner from '../Spinner';
const Events = (props) => {
if (!Array.isArray(props.data) || !props.data) {
return null;
}
//****** FIN Instancia & function solo para testear EVENTOS, una vez terminado se borra *******
return (
<Container>
<Header>
<Rectangle></Rectangle>
<EventsText HeaderTitle>Todos los eventos</EventsText>
<Link to='/events/signup'>
<Button primary>Agendar Evento</Button>
</Link>
</Header>
<SearchHeader>
<EventsText HeaderSubTitle>Buscar eventos de un orientado</EventsText>
<IconContainer>
<Icon type='search' width={20} height={20} />
</IconContainer>
<FormInput
// Acá iría funcionalidad del search box, ticket vcampc-23..
type='text'
placeholder='Buscar eventos por nombre y apellido del orientado'
></FormInput>
</SearchHeader>
<PaginateContainer>
<PaginateText>
{props.defaultListLength * props.defaultPage -
(props.defaultListLength - 1)}{' '}
- {props.defaultListLength * props.defaultPage} de {props.data.length}
</PaginateText>
<ArrowContainer circled={'none'} onClick={props.prevPage}>
<Icon type='arrow-left' height={24} width={24} color='none' />
</ArrowContainer>
<ArrowContainer circled={'none'} onClick={props.nextPage}>
<Icon type='arrow-right' height={24} width={24} color='none' />
</ArrowContainer>
</PaginateContainer>
<Table>
<thead>
<tr>
<TableHeader>Fecha</TableHeader>
<TableHeader>Horario</TableHeader>
<TableHeader>Evento</TableHeader>
<TableHeader>Participantes</TableHeader>
<TableHeader></TableHeader>
</tr>
</thead>
<tbody>
{props.data &&
props.data.map((item, i) => {
return (
<tr key={i}>
<TableData>
{item.dateOfEvent.split('-').reverse().join('/')}
</TableData>
<TableData>{item.hour.slice(0, -3)}hs</TableData>
<TableData>{item.eventType}</TableData>
<TableData>
<TableDataText>
{item.mentees &&
item.mentees.map((i) => i.name).join(', ')}
</TableDataText>
</TableData>
<TableData>
<ArrowContainer DeleteIcon>
<Icon type='delete' height={24} width={24} color='none' />
</ArrowContainer>
</TableData>
</tr>
);
})}
</tbody>
</Table>
</Container>
);
};
export default Events;

我需要专注于这两个功能我尝试了很多方法，但都无法成功，我的逻辑还不太好，所以我来这里寻求帮助：(

谢谢

const nextPage = () => {
setPage(page === data.length / EVENTS_PER_PAGE ? page : page + 1);
console.log('FIRST SPLICE:', firstPage + 1);
console.log('SECOND SPLICE:', items.length + EVENTS_PER_PAGE - 1);
};
const prevPage = () => {
setPage(page === 1 ? page : page - 1);
};

Answer 1

好的，我解决了！我花了一段时间。答案低于

useEffect(() => {
getEvents()
.then(function (response) {
setData(response.data);
})
.catch(function (error) {
setError(error);
})
.finally(function (response) {
setIsLoading(false);
});
}, []);
useEffect(() => {
const firstPage = page * EVENTS_PER_PAGE;
const lastPage = firstPage - EVENTS_PER_PAGE;
setItems(data.events?.slice(lastPage, firstPage));
}, [data.events, page]);
const nextPage = () => {
setPage(page === data.events.length / EVENTS_PER_PAGE ? page : page + 1);
};
const prevPage = () => {
setPage(page === 1 ? page : page - 1);
};