React 列表页面中管理接口请求的参数

在 React 列表页面中管理接口请求的参数时，通常涉及到以下几个步骤：

使用 useState 管理请求参数：将所有需要的请求参数（如分页、筛选条件、排序等）存储在 useState 中。
使用 useEffect 触发数据请求：每当请求参数发生变化时，通过 useEffect 钩子重新发起请求。
构建和发送请求：根据当前的请求参数构建请求，并通过 Axios 发送请求。
处理响应数据：将响应数据保存到组件状态中，以便渲染列表。

示例代码：

javascript 复制代码

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>
        <input
          type="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>
        <button
          disabled={params.page === 1}
          onClick={() => updateParams({ page: params.page - 1 })}
        >
          Previous Page
        </button>
        <button
          onClick={() => updateParams({ page: params.page + 1 })}
        >
          Next Page
        </button>
      </div>
    </div>
  );
};

export default ProductList;