react 列表页面中管理接口请求的参数
在 React 列表页面中管理接口请求的参数时，通常涉及到以下几个步骤：
- 使用 useState 管理请求参数：将所有需要的请求参数（如分页、筛选条件、排序等）存储在 useState 中。
- 使用 useEffect 触发数据请求：每当请求参数发生变化时，通过 useEffect 钩子重新发起请求。
- 构建和发送请求：根据当前的请求参数构建请求，并通过 Axios 发送请求。
- 处理响应数据：将响应数据保存到组件状态中，以便渲染列表。
示例代码：
import React, { useState, useEffect } from 'react';
import axios from 'axios';const ProductList = () => {// 管理请求参数const [params, setParams] = useState({page: 1,pageSize: 10,category: '',sortBy: 'name',sortOrder: 'asc',});// 管理列表数据和加载状态const [products, setProducts] = useState([]);const [loading, setLoading] = useState(false);// 请求数据函数const fetchData = async () => {setLoading(true);try {const response = await axios.get('/api/products', { params });setProducts(response.data);} catch (error) {console.error('Error fetching data:', error);} finally {setLoading(false);}};// 每当请求参数变化时触发数据请求useEffect(() => {fetchData();}, [params]);// 更新请求参数的函数const updateParams = (newParams) => {setParams(prevParams => ({...prevParams,...newParams,}));};return (<div><div><inputtype="text"placeholder="Search by category"onChange={(e) => updateParams({ category: e.target.value, page: 1 })}/><select onChange={(e) => updateParams({ sortBy: e.target.value, page: 1 })}><option value="name">Sort by Name</option><option value="price">Sort by Price</option></select><button onClick={() => updateParams({ sortOrder: params.sortOrder === 'asc' ? 'desc' : 'asc' })}>Toggle Sort Order</button></div>{loading ? (<p>Loading...</p>) : (<ul>{products.map(product => (<li key={product.id}>{product.name} - {product.category} - ${product.price}</li>))}</ul>)}<div><buttondisabled={params.page === 1}onClick={() => updateParams({ page: params.page - 1 })}>Previous Page</button><buttononClick={() => updateParams({ page: params.page + 1 })}>Next Page</button></div></div>);
};export default ProductList;