Как получить доступ к вложенным значениям из записи в React-Admin - PullRequest
Новая
       4

Как получить доступ к вложенным значениям из записи в React-Admin

0 голосов
/ 01 ноября 2018

Я пытаюсь получить доступ к вложенным значениям в массиве REST API в LIST VIEW проекта React-Admin. Короче говоря, я пытаюсь сделать что-то вроде «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>
);

Независимо от того, что он передает контексту массива, как будто он находится только на верхнем уровне, он никогда не передает точный объект массива, на который я ссылаюсь с помощью "."

Я делаю это неправильно, и мне нужно понимание и руководство о том, как сделать это правильно.

Сетка сообщений ожидает, что массив будет перебирать и создавать пользовательский интерфейс для каждого элемента. 

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 голосов
/ 01 ноября 2018

Понял, сделав так, обернув их в 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>
);
...