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

原创

已于 2024-08-30 10:12:22 修改 · 851 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2024-08-29 19:54:01 首次发布

在 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