将过滤器发送到 react-admin 列表中的导出器答案

【问题标题】：Send filters to exporter within list on react-admin将过滤器发送到 react-admin 列表中的导出器
【发布时间】：2020-10-15 15:29:29
【问题描述】：

我正在尝试构建自己的导出器函数，但我需要调用不同的 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}
        >

非常感谢

【问题讨论】：

标签： javascript reactjs react-admin

【解决方案1】：

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

如果您需要在导出器中进行自定义查询，您应该知道导出器函数接收 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,
            dataProvider,
            exporter,
            filterValues,
            maxResults,
            notify,
            onClick,
            resource,
            sort,
        ]
    );

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

const defaultIcon = <DownloadIcon />;

const sanitizeRestProps = ({
    basePath,
    filterValues,
    resource,
    ...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;

【讨论】：

【解决方案2】：

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

【讨论】：