如何在react-admin中直接访问dataProvider？

Question

如何在react-admin中直接访问dataProvider？我尝试使用自定义 dataProvider但我不知道如何使用它。我的目标是使用地图在输出中显示列表。//Contacts.js/// --- List ---export const ContactList = (props) => {  const classes = useStyles();  const {data} = useGetList('contacts', props.id);  return (     <List className={classes.list}>      {data.map(({id, name, person}) => (        <React.Fragment key={id}>          <ListItem button>            <ListItemAvatar>              <Avatar alt="Profile Picture" src={person}/>            </ListItemAvatar>            <ListItemText primary={name}/>          </ListItem>        </React.Fragment>      ))}    </List>  )};//App.jsconst App = () => (  <Admin dataProvider={dataProvider} layout={MyLayout}>    <Resource      name="contacts"      list={ContactList}      show={ShowContact}      edit={EditGuesser}      create={CreateContact}      icon={ContactPhoneIcon}/>  </Admin>);export default App;//DataProvider.jsimport fakeDataProvider from 'ra-data-fakerest';const dataProvider = fakeDataProvider({  contacts: [    {      id: 1,      name: "Tom",      numbers: {number: '09367371111', type: 'Mobile'},      person: '/static/images/avatar/5.jpg',    },    {      id: 2,      name: "Sara",      numbers: {number: '0936737999', type: 'Home'},      person: '/static/images/avatar/1.jpg',    },  ],});export default dataProvider;控制台日志 

Answer 1

您必须创建一个自定义列表渲染器来替代<Datagrid>，并将其作为 的子级传递<List>：

export const ContactList = (props) => {

  const classes = useStyles();

  return (

     <List className={classes.list}>

        <ContactSimpleList /<

    </List>

  )

};

该<List>组件创建一个, 并将,和ListContext放置在其中。因此，您可以通过列表渲染器中的上下文访问此数据：idsdatatotal

import { useListContext } from 'react-admin';

const ContactSimpleList = () => {

  const { ids, data } = useListContext();

  return (

    <>

      {ids.map(id => (

          <ListItem key={id} button>

            <ListItemAvatar>

              <Avatar alt="Profile Picture" src={data[id].person}/>

            </ListItemAvatar>

            <ListItemText primary={data[id].name}/>

          </ListItem>

      ))}

    </>

  );

}

此外，您尝试渲染的SimpleList 看起来很像由react-admin提供的本机组件：组件<SimpleList>。您可能不需要编写自定义渲染器。