无法将Admin-on-rest与Express REST API集成：仅显示最后一个客户

嘿，我之前也碰到过一模一样的问题！大概率是你的API返回格式不符合Admin-on-rest的预期，或者Express接口的写法有问题，导致数据没有正确传递给管理面板。咱们一步步排查解决：

1. 先检查你的Express API返回格式 #

Admin-on-rest的jsonServerRestClient默认要求列表接口（比如GET /users）返回的是数组格式的数据集，或者是包含data字段的对象（比如{ data: [客户1, 客户2] }）。如果你的接口返回的是单个对象，或者循环里多次调用res.send，就会只显示最后一条数据。

错误的Express写法（会导致只返回最后一个客户）

// 错误：循环里调用res.send，每次都会覆盖响应，最终只发送最后一个客户
app.get('/users', (req, res) => {
  const customers = [/* 你的客户数据 */];
  customers.forEach(customer => {
    res.send(customer); 
  });
});

正确的Express写法（返回完整数组）

// 正确：一次性返回整个客户数组
app.get('/users', (req, res) => {
  const customers = [
    { id: 1, name: "Alice", email: "alice@test.com" },
    { id: 2, name: "Bob", email: "bob@test.com" }
  ];
  res.json(customers); 
  // 如果你的API习惯返回带data字段的结构，也可以写：res.json({ data: customers })
});

你可以先用Postman或者浏览器直接访问/users接口，确认返回的是完整数组，而不是单个对象。

2. 调整Admin-on-rest的客户端配置（如果需要） #

如果你的API返回的结构不是默认支持的（比如数组放在items字段里，而不是根数组或data字段），可以自定义Rest Client来适配：

import { fetchUtils, Admin, Resource, List, Datagrid, TextField } from 'admin-on-rest';

// 自定义适配你的API格式的Rest Client
const apiUrl = 'http://localhost:3000';
const httpClient = fetchUtils.fetchJson;

const myRestClient = (type, resource, params) => {
  let url = `${apiUrl}/${resource}`;
  
  // 处理列表请求，适配你的API返回字段
  if (type === 'GET_LIST') {
    return httpClient(url).then(({ json }) => ({
      data: json.items, // 替换成你API里的数组字段名
      total: json.totalCount // 如果需要分页，替换成你的总数字段
    }));
  }
  
  // 其他类型请求（比如GET_ONE、CREATE等）的默认处理
  return httpClient(url).then(({ json }) => ({ data: json }));
};

// 你的UserList组件示例
const UserList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="email" />
    </Datagrid>
  </List>
);

class App extends Component {
  render() {
    return (
      <Admin restClient={myRestClient}>
        <Resource name="users" list={UserList} />
      </Admin>
    );
  }
}

export default App;

3. 确认UserList组件的正确性 #

确保你的UserList是用<List>组件包裹<Datagrid>的标准写法，<List>会自动遍历传入的数组数据，渲染每一行记录。如果组件里的字段和你的客户数据字段不匹配，也可能导致显示异常，所以要检查source属性是否对应数据里的键名。

按照上面的步骤调整后，应该就能正常显示所有客户列表了！

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