在react-admin列表中向出口商发送过滤器

如何解决在react-admin列表中向出口商发送过滤器

我正在尝试构建自己的导出器功能，但需要调用其他dataProvider。我不想使用fetchRelatedRecords，因为可能有成千上万的ID，并且我将数据库击中的次数太多了。我正在尝试将过滤器从列表组件发送到导出器，但是我不知道该怎么做。有什么可能的方法？

        <List
            aside={<OrdersAside kpis={kpis} />}
            bulkActionButtons={false}
            filters={<OrdersFilter />}
            sort={{ field: 'pickup_at',order: 'DESC' }}
            filterDefaultValues={{
                pickup_at__gt: pickupAtGt,}}
            exporter={exporter}
            {...props}
        >

非常感谢

解决方法

导出器功能无权访问该过滤器，因为它已被用于查询导出器作为第一个参数接收的记录列表。

如果需要在导出器中进行自定义查询，则应该知道导出器函数将dataProvider接收为第一个参数。

如果<ExportButton>不能完全满足您的要求，请用您自己的组件代替！实现并不复杂：

import * as React from 'react';
import { useCallback,FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import DownloadIcon from '@material-ui/icons/GetApp';
import {
    Button,fetchRelatedRecords,useDataProvider,useNotify,useListContext,SortPayload,Exporter,FilterPayload,} from 'react-admin';

const ExportButton = props => {
    const {
        maxResults = 1000,onClick,label = 'ra.action.export',icon = defaultIcon,exporter: customExporter,...rest
    } = props;
    const {
        filterValues,resource,currentSort,exporter: exporterFromContext,total,} = useListContext(props);
    const exporter = customExporter || exporterFromContext;
    const dataProvider = useDataProvider();
    const notify = useNotify();
    const handleClick = useCallback(
        event => {
            dataProvider
                .getList(resource,{
                    sort: currentSort,filter: filterValues,pagination: { page: 1,perPage: maxResults },})
                .then(
                    ({ data }) =>
                        // here,do what you want with the data
                        // ...
                        // the default implementation is:
                        exporter &&
                        exporter(
                            data,fetchRelatedRecords(dataProvider),dataProvider,resource
                        )
                )
                .catch(error => {
                    console.error(error);
                    notify('ra.notification.http_error','warning');
                });
            if (typeof onClick === 'function') {
                onClick(event);
            }
        },[
            currentSort,exporter,filterValues,maxResults,notify,sort,]
    );

    return (
        <Button
            onClick={handleClick}
            label={label}
            disabled={total === 0}
            {...sanitizeRestProps(rest)}
        >
            {icon}
        </Button>
    );
};

const defaultIcon = <DownloadIcon />;

const sanitizeRestProps = ({
    basePath,...rest
}) =>
    rest;

ExportButton.propTypes = {
    basePath: PropTypes.string,exporter: PropTypes.func,filterValues: PropTypes.object,label: PropTypes.string,maxResults: PropTypes.number,resource: PropTypes.string,sort: PropTypes.exact({
        field: PropTypes.string,order: PropTypes.string,}),icon: PropTypes.element,};

export default ExportButton;

,

你需要在 CustomListActions 中创建 react-admin 你可以从 props o CustomListActions 访问 filterVaues 和 PermanentFilter 对象