具有相同元素的反应管理员填充列表

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Maifee Ul Asad正在寻找来自信誉良好的消息的答案：“我无法解决这个问题，春季后端，前端反应..解决并获得赏金。”

codesandbox.io

我正在尝试使用react-admin创建一个不错的管理仪表板。当我在后端使用Spring时，我正在像这样发送数据：

    @GetMapping("admin/user")
    ResponseEntity<List<User> > getAll()
    {
        System.out.println(new Date());;

        HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.set("Content-Range", "posts 0-"+userRepository.findAll().size()+"/"+userRepository.findAll().size());
        responseHeaders.set("Origin", "http://localhost:3001");


        return ResponseEntity.ok()
                .headers(responseHeaders)
                .body(userRepository.findAll());
    }

首先这是行不通的，其次，这甚至都不接近正确的解决方案

但是我的客户一次又一次地渲染最后一件事。此元素是ID为129的响应用户的最后一个元素。

这里是一个提示：

React.js：

    render() {
        return(
          <div>
              <Admin dataProvider={restProvider('http://localhost:8080/admin')}>
                  <Resource name="user" list={UserList}/>
              </Admin>
          </div>
        );
    }

      const UserList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="userID" />
            <TextField source="username" />
            <TextField source="firstName" />
            <TextField source="middleName" />
            <TextField source="lastName" />
            <TextField source="profileImageURL" />
            <DateField source="joiningTime" />
            <EditButton basePath="/posts" />
        </Datagrid>
    </List>
);

给我某种方法，该方法将覆盖并使用Content-Range头使每个控制器响应

与邮递员合作顺利：

Answer 1

每个记录必须具有一个名为id的字段，在您的情况下代表您的userID字段。

如果无法更改该服务器端，则可以使用javascript。

使用您的代码和框中的AdminPanel.js代码，我会将自定义的httpClient传递给ra-data-simple-rest，以将userID字段映射到id：

import React from "react";
import { Admin, Resource, fetchUtils } from "react-admin";
import restProvider from "ra-data-simple-rest";
import { UserList, LoginCredentialList } from "./posts";

const fetchJson = (url, options = {}) => {
    // - Custom Headers

    //if (!options.headers) {
    //    options.headers = new Headers({ Accept: 'application/json' });
    //}
    // add your own headers here
    //options.headers.set('X-Custom-Header', 'foobar');

    // - Custom response

    return fetchUtils.
      fetchJson(url, options)
      .then(({ status, headers, body, json }) => {
          const { data } = json;

          // Map "userID" to "id"
          return {
              data: data.map(record => ({"id": record.userID, ...record})),
              total: parseInt(json.total, 10)
          };
    });
};

class AdminPanel extends React.Component {
  render() {
    return (
      <div>
        <Admin dataProvider={restProvider("http://localhost:8080/admin", fetchJson)}>
          <Resource name="user" list={UserList} />
          <Resource name="loginCredential" list={LoginCredentialList} />
        </Admin>
      </div>
    );
  }
}

export default AdminPanel;

//                  <Resource name="posts" list={UserList} edit={PostEdit} create={PostCreate}/>