React中用useState和Axios按Boolean类型拆分数据为两个表格

核心思路 #

拿到后端返回的数据后，直接根据request字段（1=已批准，0=未批准）拆分出两个数组，再分别渲染成表格即可，无需复杂的搜索过滤逻辑。

完整代码示例 #

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// 复用的表格组件，减少重复代码
const DataTable = ({ title, data, columns }) => {
  return (
    <div style={{ margin: '20px 0' }}>
      <h3>{title}</h3>
      <table border="1" cellPadding="8" cellSpacing="0">
        <thead>
          <tr>
            {columns.map(col => <th key={col.key}>{col.label}</th>)}
          </tr>
        </thead>
        <tbody>
          {data.length === 0 ? (
            <tr>
              <td colSpan={columns.length} align="center">暂无数据</td>
            </tr>
          ) : (
            data.map(item => (
              <tr key={item.id}>
                {columns.map(col => <td key={col.key}>{item[col.key]}</td>)}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

const RequestList = () => {
  const [approvedRequests, setApprovedRequests] = useState([]);
  const [pendingRequests, setPendingRequests] = useState([]);
  const [loading, setLoading] = useState(true);

  // 定义表格列配置，根据实际后端字段调整
  const tableColumns = [
    { key: 'id', label: '请求ID' },
    { key: 'userName', label: '申请人' },
    { key: 'requestContent', label: '请求内容' },
    { key: 'createTime', label: '提交时间' }
  ];

  useEffect(() => {
    // 发起Axios请求获取数据
    axios.get('/api/requests') // 替换为你的后端接口地址
      .then(response => {
        const allData = response.data;
        // 按request字段拆分数据
        const approved = allData.filter(item => item.request === 1);
        const pending = allData.filter(item => item.request === 0);
        setApprovedRequests(approved);
        setPendingRequests(pending);
      })
      .catch(error => {
        console.error('获取数据失败:', error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div style={{ padding: '20px' }}>
      <h2>请求审批列表</h2>
      <DataTable 
        title="已批准请求" 
        data={approvedRequests} 
        columns={tableColumns} 
      />
      <DataTable 
        title="待批准请求" 
        data={pendingRequests} 
        columns={tableColumns} 
      />
    </div>
  );
};

export default RequestList;

关键说明 #

• 数据拆分：在Axios请求的then回调中，用Array.filter()直接将原始数据拆分为两个数组，分别存入状态。
• 表格复用：封装DataTable组件，只需传入标题、数据和列配置即可渲染对应表格，避免重复代码。
• 异常处理：加入catch捕获请求错误，finally处理加载状态，优化用户体验。
• 字段适配：tableColumns中的字段需与后端返回的实际字段对应，自行替换成业务中的真实字段即可。

内容的提问来源于stack exchange，提问作者Ramel Jay Cuña