React管理实现

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管理员直接完成了。我建议你先学习教程。