Estoy usando el marco react-admin (3.2). Tengo un objeto que almacena entidades que se filtran por caducidad. Me gustaría mostrar estas entidades en List. Hasta ahora he intentado crear accesorios falsos para replicar el componente List.

let fakeProps = {
            basePath: basePath,
            hasCreate: false,
            hasEdit: false,
            hasList: true,
            hasShow: false,
            history: {},
            location: { pathname: "/", search: "", hash: "", state: undefined },
            match: { path: "/", url: "/", isExact: true, params: {} },
            options: {},
            permissions: null,
            resource: resource,
            perPage: 30,
            actions: null,
            data: this.state.filteredList
        }

Y luego regreso mi lista con accesorios:

<List {...fakeProps}>
   <Datagrid>
      <TextField source='_id' />
   </Datagrid>
</List>

Pero solo estoy obteniendo cada entidad. Necesito mostrar entidades que están almacenadas en this.state.filteredList.

¿Alguna idea de cómo puedo hacer esto? Gracias de antemano.

0
AdamSulc 16 jul. 2020 a las 14:18

2 respuestas

La mejor respuesta

Si desea replicar la interfaz de usuario del componente List, use ListController y ListView.

<ListController {...fakeProps}>
  {({ data, ...controllerProps }) =>
    return <ListView data={yourData} {...fakeProps} {...controllerProps}>
    
    </ListView>
  }
</ListController>

También es posible que tenga que transformar el formato de datos que está poniendo en ListView usando reduce.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

También es posible que tenga que dar ListView más accesorios personalizados, solo verifique los errores en la consola.

1
Adam Šulc 22 jul. 2020 a las 13:56

En este escenario, es clave tener en cuenta esta explicación de react-admin

La vista Lista muestra una lista de registros obtenidos de la API.
El punto de entrada para esta vista es el componente <List>, que se encarga de recuperar los datos.
Luego, pasa los datos a una vista de iterador, generalmente <Datagrid>, que luego delega la representación de cada propiedad de registro a los componentes.

Por lo tanto, el filtrado se realiza en <List> como lo ha hecho.
Pero la lista tiene accesorios especiales para apoyarlo en eso.

Para establecer los valores predeterminados en los filtros, puede pasar un objeto literal como filterDefaultValues accesorio del elemento <List>.

<List
  {...props}
  // entities that are filtered by expiration
  filterDefaultValues={{ is_expired: true }}
>
  <StyledTabbedDatagrid />
</List>
0
MwamiTovi 17 jul. 2020 a las 14:53