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

Question

我试图在 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>

...

Answer 1

通过将它们包装在 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>
);

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

How to access nested values from record in React-Admin

react-admin