1

我必须在这里遗漏一些东西，但找不到 在这张照片上我们可以看到我的所有结果都已加载到站字段但该字段下没有显示自动完成建议的内容。我也尝试了一个SelectInput组件，列表选项为空

在 redux 中，自定义查询成功： 看这里

我的创建和编辑部分的代码与以下代码几乎相同：

import React, {FC} from "react";
import {
    CreateGuesser,
    InputGuesser
} from "@api-platform/admin";
import {ReferenceInput, AutocompleteInput, FilterProps} from "react-admin";

const RefuelsCreate : FC<Omit<FilterProps, 'children'>> = props => (
    <CreateGuesser {...props}>
        <InputGuesser source="pricePerLiter" />
        <ReferenceInput
            source="stationId"
            reference="gaz_stations"
            label="Station"
            filterToQuery={searchText => ({ address: searchText })}
        >
            <AutocompleteInput optionText="address" />
        </ReferenceInput>
        <InputGuesser source="totalRefuelPrice" />
        <InputGuesser source="kmTravelled" />
    </CreateGuesser>
);

export default RefuelsCreate;

编辑和创建部分都不适用于此ReferenceInput 在我的 App.tsx 中，我将此组件添加到组件中ResourceGuesser。

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { HydraAdmin, ResourceGuesser, hydraDataProvider as baseHydraDataProvider, fetchHydra as baseFetchHydra, useIntrospection } from "@api-platform/admin";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import authProvider from "./Auth/AuthProvider";
import { Layout } from './layout'
import customRoutes from './routes';
import themeReducer from './themeReducer';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from './i18n/en';
import { Dashboard } from './dashboard';
import refuels from './refuels';

const i18nProvider = polyglotI18nProvider(locale => {
    if (locale === 'fr') {
        return import('./i18n/fr').then(messages => messages.default);
    }

    // Always fallback on english
    return englishMessages;
}, 'en');


const entrypoint = `${process.env.REACT_APP_API_URL}`;
const getHeaders = () => localStorage.getItem("token") ? {
    Authorization: `Bearer ${localStorage.getItem("token")}`,
} : {};

const fetchHydra= ((url: any, options = {}) =>
    baseFetchHydra(url, {
        ...options,
        headers: getHeaders,
    })
);

const RedirectToLogin = () => {
    const introspect = useIntrospection();

    if (localStorage.getItem("token")) {
        introspect();
        return <></>;
    }
    return <Redirect to="/login" />;
};

const apiDocumentationParser = async (entrypoint:any) => {
    try {
        const { api } = await parseHydraDocumentation(
                entrypoint,
                {
                    // @ts-ignore
                    headers: getHeaders
                }
            );
        return { api };
    } catch (result) {
        if (result.status === 401) {
            // Prevent infinite loop if the token is expired
            localStorage.removeItem("token");

            return {
                api: result.api,
                customRoutes: [
                    <Route path="/" component={RedirectToLogin} />
                ],
            };
        }

        throw result;
    }
};

const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser, true);

export default () => (
    <HydraAdmin
        title="ease daily app"
        customReducers={{ theme: themeReducer }}
        dataProvider={ dataProvider }
        authProvider={ authProvider }
        entrypoint={ entrypoint }
        layout={Layout}
        dashboard={ Dashboard }
        customRoutes={customRoutes}
        i18nProvider={i18nProvider}
    >
        <ResourceGuesser name="refuels" list={refuels.list} create={refuels.create} edit={refuels.edit}/>
    </HydraAdmin>
);

根据这里的文档：https ://api-platform.com/docs/admin/handling-relations/

我做得正确，它应该可以工作，但为什么没有显示任何建议？

4

1 回答 1

0

当您想使用对另一个资源的引用时，您必须将其添加为资源，这是文档所说的： 这里

取自这里

因此，在代码中，您只需将这一行放在 App.tsx 上：

        <ResourceGuesser name="gaz_stations"/>

您引用的字段将从 API 中得到补充

于 2021-01-30T14:51:55.320 回答