React应用调用Django DRF后端数据时卡在Loading组件问题求助

算力阿峰

2026-9-28

问题根因排查及修复方案

你的页面一直卡在Loading状态是由触发Loading的两个判断条件不满足退出逻辑导致，按优先级依次排查修复即可：

1. 最常见问题：ID数据类型不匹配

useParams返回的路由参数全为字符串类型，但你后端返回的enterprise.id大概率是数字类型，用===严格判断会直接不相等，修改对比逻辑为同类型匹配即可：

// 把路由id转成数字后再对比
(enterprise && Number(routeParams.enterpriseId) !== enterprise.id && routeParams.enterpriseId !== 'new')

2. API请求逻辑不符合RESTful规范

你当前的详情请求是把enterpriseId作为查询参数传给列表接口，标准的RESTful详情接口需要把ID拼接在URL路径中，同时如果你的接口返回的是数组格式的列表数据，存入Redux后自然取不到id属性，修改getEnterprise逻辑：

export const getEnterprise = createAsyncThunk('sales/enterprise', async (params) => {
  const response = await axios.get(
    // ID拼接在路径中，不要传查询参数
    `http://gustavohenry.localhost:8000/api/tenant/sale/enterprise/${params.enterpriseId}/`
  );
  return response.data ?? null;
});

如果你确认后端是通过查询参数返回单条数据，也需要检查返回结果是否为单条对象，如果是数组格式需要取第一个元素返回：`return response.data[0] ?? null`

3. form为空判断触发的Loading

react-hook-form的reset方法是异步执行的，拿到Redux的enterprise数据执行reset后，watch返回的form不会立刻更新，会导致_.isEmpty(form)一直为true，调整Loading判断逻辑即可：

if (
  // 只有新增场景才判断form是否为空，编辑场景有enterprise数据就跳过该判断
  (routeParams.enterpriseId === 'new' && _.isEmpty(form)) ||
  (enterprise && Number(routeParams.enterpriseId) !== enterprise.id && routeParams.enterpriseId !== 'new') ||
  // 补充enterprise还未加载完成的判断
  !enterprise
) {
  return <FuseLoading />;
}

4. 可选校验点

确认Redux中存储的enterprise字段是完整的单条对象，没有嵌套层级（比如后端返回data.results你直接存了data导致字段丢失）
确认后端返回的字段名和前端表单使用的字段名完全一致，比如你表单中用的comercialName是否和后端返回的拼写完全相同，没有拼写错误

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