ReactJS使用axios调用API时如何实现数据表格日期范围筛选

完整实现示例 #

以下是基于React18 + Ant Design + axios的可运行示例，覆盖日期范围参数传递、接口请求、表格渲染全流程：

1. 安装依赖 #

npm install antd axios dayjs

2. 组件代码实现 #

import { useState, useEffect } from 'react';
import { Table, DatePicker, Space, message } from 'antd';
import axios from 'axios';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

const DataTableWithDateFilter = () => {
  // 状态定义
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [dateRange, setDateRange] = useState([]);

  // 获取表格数据方法
  const fetchTableData = async (startDate = '', endDate = '') => {
    setLoading(true);
    try {
      // 构造请求参数，日期格式可根据后端要求调整
      const params = {
        page: 1,
        pageSize: 10,
        ...(startDate && { start_date: dayjs(startDate).format('YYYY-MM-DD') }),
        ...(endDate && { end_date: dayjs(endDate).format('YYYY-MM-DD') })
      };
      const res = await axios.get('你的接口地址', { params });
      // 按后端返回结构调整取值逻辑
      setTableData(res.data.list || []);
    } catch (err) {
      message.error('数据获取失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 日期范围变化触发筛选
  const handleDateChange = (dates) => {
    setDateRange(dates);
    if (dates && dates.length === 2) {
      fetchTableData(dates[0], dates[1]);
    } else {
      // 清空日期时返回全量数据
      fetchTableData();
    }
  };

  // 初始化加载全量数据
  useEffect(() => {
    fetchTableData();
  }, []);

  // 表格列配置，按实际需求调整
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content'
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      render: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
    }
  ];

  return (
    <div style={{ padding: 20 }}>
      {/* 筛选区域 */}
      <Space style={{ marginBottom: 20 }}>
        <RangePicker
          value={dateRange}
          onChange={handleDateChange}
          format="YYYY-MM-DD"
          placeholder={['开始日期', '结束日期']}
        />
      </Space>
      {/* 表格区域 */}
      <Table
        rowKey="id"
        loading={loading}
        dataSource={tableData}
        columns={columns}
        pagination={{
          total: tableData.length,
          pageSize: 10
        }}
      />
    </div>
  );
};

export default DataTableWithDateFilter;

注意事项 #

• 日期传参格式必须和后端接口要求保持一致，若后端要求时间戳可把format方法替换为valueOf()
• 如果不需要依赖Ant Design，可替换为原生input type="date"实现范围选择，逻辑完全一致
• 若需要前端本地筛选不请求接口，可在拿到全量数据后直接用filter方法过滤时间字段即可，示例如下：

// 前端本地筛选逻辑
const filteredData = allData.filter(item => {
  const itemTime = dayjs(item.create_time).valueOf();
  const startTime = dateRange[0] ? dayjs(dateRange[0]).startOf('day').valueOf() : -Infinity;
  const endTime = dateRange[1] ? dayjs(dateRange[1]).endOf('day').valueOf() : Infinity;
  return itemTime >= startTime && itemTime <= endTime;
})

内容的提问来源于stack exchange，提问作者govind jha