给 List 组件特定的数据来显示

Question

我正在使用 react-admin 框架 (3.2)。我有一个对象存储按过期过滤的实体。我想在 List 中显示这些实体。到目前为止，我已经尝试创建假道具来复制 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
        }

然后我 return 我的道具清单：

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

但我只得到每个实体。我需要显示存储在 this.state.filteredList.

中的实体

我该怎么做？提前谢谢你。

Answer 1

在这种情况下，关键是要注意 react-admin 的解释

The List view displays a list of records fetched from the API.
The entry point for this view is the <List> component, which takes care of fetching the data.
Then, it passes the data to an iterator view - usually <Datagrid>, which then delegates the rendering of each record property to components.

因此，像您所做的那样，在 <List> 处进行过滤。
但是这个列表有特殊的道具来支持你。

要为过滤器设置默认值，您可以将对象文字作为 <List> 元素的 filterDefaultValues 属性传递。

<List
  {...props}
  // entities that are filtered by expiration
  filterDefaultValues={{ is_expired: true }}
>
  <StyledTabbedDatagrid />
</List>

Answer 2

如果要复制 List 组件的 UI，请使用 ListController 和 ListView。

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

您也可能必须使用 reduce 转换您放入 ListView 的数据格式。

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

此外，您可能需要提供 ListView 更多自定义道具，只需检查控制台中的错误即可。

给 List 组件特定的数据来显示

Give List component specific data to display

javascript

reactjs

react-admin