如何在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.js

const App = () => (

  <Admin dataProvider={dataProvider} layout={MyLayout}>

    <Resource

      name="contacts"

      list={ContactList}

      show={ShowContact}

      edit={EditGuesser}

      create={CreateContact}

      icon={ContactPhoneIcon}/>

  </Admin>

);

export default App;

//DataProvider.js

import 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放置在其中。因此，您可以通过列表渲染器中的上下文访问此数据：idsdatatotalimport { 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>。您可能不需要编写自定义渲染器。