时间戳

首页 > 解决方案 > 如何从 React-Admin 中的记录访问嵌套值

react-admin - 如何从 React-Admin 中的记录访问嵌套值

问题描述

我正在尝试访问 React-Admin 项目的列表视图中的 REST API 数组中的嵌套值。简而言之，当将它传递给呈现它的组件时，我正在尝试做类似“Array.item”的事情。

我的数据填充如下：

每个消息数组看起来像这样，所以这里是其中之一：

for (let i = 0; i < 13; i++) {
      data.messagesDirect.push({
         id: i,
         read: faker.random.boolean(),
         date: faker.date.past(),
         subject:
            faker.name.jobDescriptor() +
            ' ' +
            faker.name.jobArea() +
            ' ' +
            faker.name.jobType(),
         content: faker.lorem.paragraph(),

         email:
            faker.internet.email() +
            ' - ' +
            faker.name.firstName() +
            ' ' +
            faker.name.lastName()
      });
   }

最后我把它们放在一个数组中。

data.messages.push({
      id: 0,
      inbox: data.messagesInbox,
      outbox: data.messagesOutbox,
      direct: data.messagesDirect
   });

data.messagesInbox、outbox 和 direct 是通用数组，它们包含相同类型的数据。

我正在尝试单独访问每个数组，并将该信息传递给用于渲染这些数组的组件。

export const MessagesList = props => (
   <FullWidthTabs>
      <List actions={<InboxListActions />} {...props}>
         <MessagesGrid data="messages.inbox" />
      </List>

      <List actions={<OutboxListActions />} {...props}>
         <MessagesGrid data="messages.outbox" />
      </List>

      <List actions={<DirectListActions />} {...props}>
         <MessagesGrid data="messages.direct" />
      </List>
   </FullWidthTabs>
);

无论它不断传递数组的上下文，就好像它只是在顶层一样，它永远不会传递我用“。”引用的确切数组对象。

我做错了，我需要理解和指导如何正确地做这件事。

消息网格只需要一个数组来迭代并为每个项目创建 UI。

const MessagesGrid = ({ data, basePath, resource }) =>
   console.log(data) || (
      <div style={{ margin: '1em' }}>
         {data.map(id => (
            <Card key={id} style={cardStyle}>
               <ReadField record={data[id]} source="confirmed" />
               <CardHeader
                  title={<TextField record={data[id]} source="subject" />}
                  subheader={<DateField record={data[id]} source="date" />}
               />

               <CardContent>
                  <TextField record={data[id]} source="content" />
               </CardContent>

...

标签： react-admin

解决方案

想通了，这样做，通过将它们包装在 Datagrids 中并使用 ArrayField 它能够进入每个数组：

export const MessagesList = (props, resource) => (
   <FullWidthTabs>
      <List actions={<InboxListActions />} {...props}>
         <Datagrid>
            <ArrayField source="inbox">
               <MessagesGrid />
            </ArrayField>
         </Datagrid>
      </List>

      <List actions={<OutboxListActions />} {...props}>
         <Datagrid>
            <ArrayField source="outbox">
               <MessagesGrid />
            </ArrayField>
         </Datagrid>
      </List>

      <List actions={<DirectListActions />} {...props}>
         <Datagrid>
            <ArrayField source="direct">
               <MessagesGrid />
            </ArrayField>
         </Datagrid>
      </List>
   </FullWidthTabs>
);

推荐阅读