我想对数据进行分页.它运行良好，但当我搜索特定数据时，它总是显示在第一页

Question

我想要的是对数据进行分页，但问题是，当我搜索特定数据时，如果我在第3页，结果总是显示在第1页，我什么都看不到，因为我在第三页。我想在搜索内容时自动转到第1页。此外，当我按下下一个按钮时，如果根本没有数据，它仍然会增加页码。

这是我的代码：

import { React, useState, useEffect } from "react";
import UpdateDialogue from "./UpdateDialogue";
function List(props) {
const API_URL = "http://dummy.restapiexample.com/api/v1/employees";
const [EmployeeData, setEmployeeData] = useState([]);
const [pageNumber, setPageNumber] = useState(1);
const [postNumber] = useState(8);
const currentPageNumber = pageNumber * postNumber - postNumber;
const handlePrev = () => {
if (pageNumber === 1) return;
setPageNumber(pageNumber - 1);
};
const handleNext = () => {
setPageNumber(pageNumber + 1);
};
useEffect(() => {
fetch(API_URL)
.then((response) => response.json())
.then((response) => {
setEmployeeData(response.data);
})
.catch((err) => {
console.error(err);
});
}, []);
const filteredData = EmployeeData.filter((el) => {
if (props.input === "") {
return el;
} else {
return el.employee_name.toLowerCase().includes(props.input)
}
});
const paginatedData = filteredData.splice(currentPageNumber, postNumber);

return (
<>
<ul>

{paginatedData.map((user) => (
<UpdateDialogue user={user} key={user.id} />
))}
</ul>
<div>Page {pageNumber} </div>
<div>
<button style={{marginRight:10}} onClick={handlePrev}>prev</button>
<button onClick={handleNext}>next</button>
</div>
</>
);
}
export default List;

Answer 1

可能会对您的输入产生useEffect:

useEffect(() => {
if (props.input) {
setPageNumber(1);
}
}, [props.input]);

这样，每当您的输入发生更改时，您的页码就会设置为1。