React-admin 实现

Question

我是 react-admin 的新手，无法将数据显示到屏幕上。阅读文档后，这就是我实现代码的方式。我能够在 useEffect 的 console.log 中获取数据，它是具有对象键（如 id、fullName、emailId）的对象数组。但我无法将数据放入列表中，以便文本字段接收数据并将其显示在屏幕上。

import * as React from "react";
import { useDataProvider } from 'react-admin';
import axios from 'axios'
import { List, Datagrid, TextField } from 'admin-on-rest/lib/mui';

const AllUsers = (props) => {

    const dataProvider = useDataProvider()
    let [result, setResult] = React.useState("")

    //const restClient = restProvider(data, true);


    React.useEffect(async () => {
        try {
            let resp = await dataProvider.getList("allUsers",{ pagination: {  },
            sort: { },
            filter: {  },})
            console.log(resp.data)
        }
        catch (err) {
            console.log(err)
        }

    }, []);

    

    return (
        <>
                <List {...props}>
                    <Datagrid>
                        <TextField source="id" sortable={false} />
                        <TextField source="emailId" />
                        <TextField source="fullname" />
                    </Datagrid>
                    
                </List>
         
        </>
    );

}
export default AllUsers;

这就是我将道具传递给 AllUsers 组件的方式

import * as React from "react";
import { render } from 'react-dom';
import { Admin, Resource, ListGuesser,AuthProvider } from 'react-admin';
import restProvider from 'ra-data-json-server';
import  AllUsers from "./components/allUsers"

const dataProvider = restProvider('http://localhost/users');


const App = () => {
  return (
    <Admin  dataProvider={dataProvider}>
      <Resource name="allUsers" list={AllUsers} />
    </Admin>
  );

}
export default App;

Answer 1

为什么要从 admin-on-rest 导入东西？从 react-admin.

导入所有内容

此外，您不需要使用钩子自己获取数据。它已经由 react-admin 直接完成。我建议你先看教程。

React-admin 实现

React-admin implementation

admin-on-rest

react-admin