react如何做上一页下一页

实现分页功能的方法

使用状态管理控制当前页码

1. 在组件中定义状态来存储当前页码和数据

   const [currentPage, setCurrentPage] = useState(1);  
   const [itemsPerPage] = useState(10); // 每页显示的数量  
   const [data, setData] = useState([]); // 存储总数据  

2. 计算当前页显示的数据

   const indexOfLastItem = currentPage * itemsPerPage;  
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;  
   const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);  

渲染分页按钮

1. 计算总页数并生成分页按钮

   

   const pageNumbers = [];  
   for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {  
    pageNumbers.push(i);  
   }  

2. 在组件中渲染分页按钮

   <div className="pagination">  
    <button  
        onClick={() => setCurrentPage(prev => (prev > 1 ? prev - 1 : 1))}  
        disabled={currentPage === 1}  
    >  
        上一页  
    </button>  
   
    {pageNumbers.map(number => (  
        <button  
            key={number}  
            onClick={() => setCurrentPage(number)}  
            className={currentPage === number ? 'active' : ''}  
        >  
            {number}  
        </button>  
    ))}  
   
    <button  
        onClick={() => setCurrentPage(prev =>  
            prev < pageNumbers.length ? prev + 1 : prev  
        )}  
        disabled={currentPage === pageNumbers.length}  
    >  
        下一页  
    </button>  
   </div>  

数据获取与更新

1. 从API获取数据并更新状态（示例）

   

   useEffect(() => {  
    fetch('https://api.example.com/data')  
        .then(response => response.json())  
        .then(data => setData(data));  
   }, []);  

2. 确保分页按钮随数据更新

   useEffect(() => {  
    setCurrentPage(1); // 数据更新时重置页码  
   }, [data]);  

样式优化（可选）

1. 为分页按钮添加基础样式

   
   .pagination button {  
    margin: 0 5px;  
    padding: 5px 10px;  
    cursor: pointer;  
   }  

.pagination button.active {
background-color: #007bff;
color: white;
}

.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

通过以上步骤，可以实现基本的分页功能，包括上一页、下一页和页码跳转。根据需求可进一步优化逻辑或样式。