react-admin列表仅显示一行数据问题求助

Hey there, let's dig into why your UserList is only rendering one record per page even though your API is returning 25 items. I've looked at your code, and here are the most likely culprits and fixes:

First, Let's Confirm the Basics #

Your App.js and UserList.js code looks correctly structured—you're passing perPage={25} to the List component, and the API is returning 25 items, so the pagination request from react-admin is working as expected. The issue is almost certainly in how react-admin is interpreting or rendering those records.

Most Common Cause: Duplicate or Missing Unique IDs #

React-admin's Datagrid relies on a unique identifier for each record to render rows correctly. If all your user records share the same id value (or the id field is missing entirely), React will treat every row as the same component and only render one instance of it.

How to Check: #

1. Open your browser's DevTools and go to the Network tab.
2. Find the GET request for users (it should look like http://localhost:3000/users?_sort=id&_order=DESC&_start=0&_end=25).
3. Check the Response tab—verify that every user object has a unique id value.

Fixes: #

• If id values are duplicate: Update your backend data to ensure each user has a unique id. This is the root fix.
• If you use a different unique field (e.g., userId instead of id): Tell react-admin which field to use by adding the idField prop to either your Resource or List component:

  // Option 1: In App.js, update the Resource
  <Resource name="users" list={UserList} options={{ idField: 'userId' }} />
  
  // Option 2: In UserList.js, update the List
  <List 
    {...props} 
    sort={{ field: 'id', order: 'DESC' }} 
    perPage={25}
    idField="userId" // Replace with your unique field name
  >
  

Other Possible Issues to Rule Out #

1. API Returns Data in an Unexpected Format #

The jsonServerProvider expects your API to return a flat array of records (e.g., [{id:1, name:"Alice"}, ...]). If your API returns data nested inside an object (like { "data": [{...}, {...}] }), the provider won't parse it correctly.

Fix: Adjust your API to return a flat array, or create a custom data provider to extract the array from the response.

2. CSS Styling Hiding Rows #

It's rare, but check if any custom CSS is accidentally hiding rows (e.g., height: 0, display: none, or overflow issues). Inspect the Datagrid rows in DevTools to confirm they're present in the DOM but not visible.

3. Explicitly Specify Row Key for Datagrid #

If all else fails, you can force the Datagrid to use a specific field as the row key with the rowKey prop:

<Datagrid rowKey="name"> {/* Use a unique field here, like name + age if needed */}
  <TextField source="name" />
  <NumberField source="age" />
</Datagrid>

Note: This is a workaround—fixing the unique ID issue is always better practice.

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