求助：React Admin ResourceContextProvider关联List组件已获取数据不展示

你遇到的「数据已获取、导出正常但Datagrid无渲染」的症状，由React Admin 3.12.1版本下ResourceContextProvider的两处配置错误直接导致：

• 你传递给ResourceContextProvider的是动态路径格式的字符串，而非静态资源标识符。React Admin的内部状态归一化逻辑（将原始数据数组转换为Datagrid可从admin存储读取的格式）依赖静态资源名来正确划分状态作用域。动态带路径的资源名会破坏归一化流程，导致Datagrid无法读取记录。导出功能正常，是因为它直接从数据提供方响应中拉取原始未归一化的数组，绕过了admin存储。
• 你混淆了「资源名（用于内部状态划分）」和basePath（用于路由和syncWithLocation）两个概念，导致状态对齐出现额外异常。

1. 拆分资源名与路由basePath #

ResourceContextProvider的value必须是静态唯一的资源名（不能是动态API路径或路由路径），<List>的basePath仍使用动态路由路径。

2. 调整数据传参与数据提供方逻辑 #

将动态ID作为永久过滤器传递给<List>，数据提供方从过滤器中读取动态参数构建API路径，不再依赖资源名携带路径信息。

3. 修正后的完整代码实现 #

自定义路由（无需修改） #

export default [
  <Route
    path="/api/camp/getListEtiq/:id/non_charge"
    render={(routeProps) => <ListEtiquette id={routeProps.match.params.id} {...routeProps} />}
  />
];

修正后的ListEtiquette组件 #

const ListEtiquette = (props) => {
  // basePath 与路由路径保持一致
  const basePath = `/api/camp/getListEtiq/${props.id}/non_charge`;

  return (
    // 传入静态资源名，而非动态路径
    <ResourceContextProvider value="campNonChargeEtiquettes">
      <List 
        syncWithLocation 
        basePath={basePath} 
        title="Liste des colis"
        // 动态ID作为永久过滤器传递，所有数据请求都会自动携带该参数
        filter={{ campId: props.id, type: 'non_charge' }}
      >
        <Datagrid>
          <TextField source="id" />
          <TextField source="numCodeEtiq" />
        </Datagrid>
      </List>
    </ResourceContextProvider>
  );
};

export default ListEtiquette;

修正后的数据提供方getList方法 #

getList: (resource, params) => {
  const { page, perPage } = params.pagination;
  const { field, order } = params.sort;
  // 从过滤器中取出动态参数，其余作为业务过滤条件
  const { campId, type, ...restFilters } = params.filter;

  const query = {
    ...fetchUtils.flattenObject(restFilters),
    _sort: field,
    _order: order,
    _start: (page - 1) * perPage,
    _end: page * perPage,
  };

  // 从过滤器参数动态构建API路径
  const url = `${apiUrl}/camp/getListEtiq/${campId}/${type}?${stringify(query)}`;

  return httpClient(url).then(({ headers, json }) => {
    if (!json.hasOwnProperty('totalElements')) {
      throw new Error("The numberOfElements property must be present in the Json response");
    }
    return {
      data: json.content,
      total: parseInt(json.totalElements, 10)
    };
  });
}

如果按上述修改后Datagrid仍无渲染，可在<List>组件上显式添加resource属性，覆盖上下文查找逻辑：

<List 
  resource="campNonChargeEtiquettes"
  syncWithLocation 
  basePath={basePath} 
  title="Liste des colis"
  filter={{ campId: props.id, type: 'non_charge' }}
>

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