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

时间:2018-11-01 14:39:17

标签: react-admin

我正在尝试在React-Admin项目的LIST VIEW中访问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>

...

1 个答案:

答案 0 :(得分:0)

通过将它们包装在Datagrids中并使用ArrayField来解决问题,做到这一点:

xrot = 10.0  
lightpos = (2.0, -2.0, 1.0)