如何通过Fetch获取Django Rest视图集的可排序字段用于React表格？

要实现你想要的效果，我们可以分两步走：在Django端暴露可排序字段的接口，然后在React端获取这些字段并动态渲染表头图标。

第一步：在Django Rest Framework中暴露可排序字段 #

DRF的内置功能其实已经支持获取视图的过滤/排序元数据，这里提供两种方案供你选择：

方案1：添加自定义Action直接返回排序字段 #

这是最直观的方式，给视图集新增一个接口专门返回ordering_fields：

from rest_framework.decorators import action
from rest_framework.response import Response

class RecipientViewSet(BaseViewSetClass):
    permission_classes = (IsAuthenticated,)
    serializer_class = serializers.RecipientsSerializer
    filter_backends = (filters.OrderingFilter,)
    ordering_fields = ('id', 'externalID', 'firstname', 'lastname', )

    @action(detail=False, methods=['get'])
    def ordering_fields(self, request):
        # 直接返回当前视图集的可排序字段列表
        return Response({'ordering_fields': self.ordering_fields})

配置完成后，你可以通过类似/api/recipients/ordering_fields/的路由（根据你的实际前缀调整）获取到可排序字段数组。

方案2：利用DRF原生OPTIONS请求获取元数据 #

DRF的GUI就是通过这个方式拿到筛选器信息的。发送OPTIONS请求到你的列表接口（比如/api/recipients/），响应里会包含视图的所有元数据，其中就有排序字段的选项：

示例响应结构（简化版）：

{
  "actions": {
    "GET": {
      "ordering": {
        "type": "string",
        "description": "Which field to use when ordering the results.",
        "choices": ["id", "externalID", "firstname", "lastname"]
      }
    }
  }
}

这种方式不需要额外编写代码，直接复用DRF的内置能力。

第二步：在React中获取并使用这些字段 #

在React组件里，我们可以在挂载阶段先获取可排序字段，然后渲染表头时判断字段是否在可排序列表中，再添加排序图标。以下是一个基础示例：

import { useState, useEffect } from 'react';

function RecipientTable() {
  const [recipients, setRecipients] = useState([]);
  const [orderingFields, setOrderingFields] = useState([]);
  const authToken = localStorage.getItem('authToken'); // 根据你的认证方式调整

  // 获取可排序字段
  useEffect(() => {
    // 方案1：调用自定义接口
    fetch('/api/recipients/ordering_fields/', {
      headers: { 'Authorization': `Token ${authToken}` }
    })
    .then(res => res.json())
    .then(data => setOrderingFields(data.ordering_fields))
    .catch(err => console.error('获取排序字段失败:', err));

    // 方案2：使用OPTIONS请求
    // fetch('/api/recipients/', { method: 'OPTIONS', headers: { 'Authorization': `Token ${authToken}` } })
    // .then(res => res.json())
    // .then(data => setOrderingFields(data.actions.GET.ordering.choices))
    // .catch(err => console.error('获取元数据失败:', err));
  }, [authToken]);

  // 获取表格数据
  useEffect(() => {
    fetch('/api/recipients/', {
      headers: { 'Authorization': `Token ${authToken}` }
    })
    .then(res => res.json())
    .then(data => setRecipients(data))
    .catch(err => console.error('获取收件人数据失败:', err));
  }, [authToken]);

  // 判断字段是否可排序
  const isSortable = (field) => orderingFields.includes(field);

  return (
    <table>
      <thead>
        <tr>
          <th>{isSortable('id') ? <span>ID ⬍</span> : 'ID'}</th>
          <th>{isSortable('externalID') ? <span>External ID ⬍</span> : 'External ID'}</th>
          <th>{isSortable('firstname') ? <span>First Name ⬍</span> : 'First Name'}</th>
          <th>{isSortable('lastname') ? <span>Last Name ⬍</span> : 'Last Name'}</th>
        </tr>
      </thead>
      <tbody>
        {recipients.map(recipient => (
          <tr key={recipient.id}>
            <td>{recipient.id}</td>
            <td>{recipient.externalID}</td>
            <td>{recipient.firstname}</td>
            <td>{recipient.lastname}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default RecipientTable;

额外提示 #

• 认证处理：确保请求带上正确的认证凭证（Token、JWT或Session Cookie），否则Django会拒绝访问。
• 排序交互扩展：如果需要实现点击表头切换排序方向的功能，可以在点击时向Django发送带ordering参数的请求（比如/api/recipients/?ordering=firstname升序，/api/recipients/?ordering=-firstname降序）。
• 错误与加载状态：实际项目中建议添加加载中提示、错误弹窗等用户友好的交互逻辑。

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