无API/后端时如何测试React-Admin？本地JSON数据使用报错求助

问题根源 #

你直接把JSON数组当作dataProvider传入是错误的——React Admin要求的dataProvider必须是一个包含标准数据操作方法（比如getList、getOne）的对象，而不是原始数组。这就是报错的核心原因。另外你代码里还有个低级错误：const dataProvider = JsonData;里的JsonData应该是小写的jsonData（和导入的变量名一致）。

解决方案：使用ra-data-fakerest模拟数据提供者 #

React Admin官方提供了ra-data-fakerest包，能把本地JSON数据转换成符合要求的dataProvider，完美适配你的无后端测试场景。

步骤1：安装依赖 #

打开终端执行：

npm install ra-data-fakerest
# 或者用yarn
yarn add ra-data-fakerest

步骤2：修正本地数据结构 #

你的UserList组件里用到了name、username、email等字段，但当前的jsonData只有userId、id、title、body，字段不匹配会导致列表显示空数据。修改你的数据文件：

// src/data/response.ts
export const jsonData = {
    users: [
        {
            id: 51,
            name: "John Doe",
            username: "johndoe",
            email: "john@example.com",
            address: { street: "123 Main St" },
            phone: "123-456-7890",
            website: "johndoe.com",
            company: { name: "Doe Corp" },
            userId: 6
        },
        {
            id: 52,
            name: "Jane Smith",
            username: "janesmith",
            email: "jane@example.com",
            address: { street: "456 Oak Ave" },
            phone: "987-654-3210",
            website: "janesmith.com",
            company: { name: "Smith Inc" },
            userId: 6
        }
        // 可按需添加更多用户数据
    ]
};

注意：数据要改成对象格式，key对应资源名users，值是用户数组，这样fakerest才能正确识别。

步骤3：修改Admin组件代码 #

更新src/admin/index.tsx，用fakerestProvider把本地数据转换成合法的dataProvider：

// src/admin/index.tsx
import { Admin, Resource } from 'react-admin';
import { fakerestProvider } from 'ra-data-fakerest';
import { jsonData } from '../data/response';
import { UserList } from '../data/Users';

// 把本地JSON转换成符合要求的dataProvider
const dataProvider = fakerestProvider(jsonData);

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name='users' list={UserList} />
    </Admin>
);

export default App;

步骤4：验证效果 #

启动项目后，React Admin会通过fakerestProvider模拟后端接口，你的UserList组件就能正确渲染用户列表了。

额外说明 #

如果不想安装额外包，也可以手动实现一个简易版dataProvider，比如只实现列表查询功能：

const dataProvider = {
    getList: (resource, params) => {
        if (resource === 'users') {
            return Promise.resolve({
                data: jsonData,
                total: jsonData.length,
            });
        }
        return Promise.reject(new Error('Resource not found'));
    }
    // 增删改查等其他方法可按需补充
};

但官方的ra-data-fakerest支持完整的CRUD操作，更适合快速测试。

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