React admin ReferenceInput 组件在使用 hydra 响应时无法按预期工作

如何解决React admin ReferenceInput 组件在使用 hydra 响应时无法按预期工作

我一定在这里错过了一些东西但找不到什么

我们可以看到我的所有结果都已加载到车站字段，但该字段下未显示自动完成建议。 我也尝试过使用 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/

我做对了，它应该可以工作，但是为什么没有显示建议？

解决方法

当您想使用对其他资源的引用时，您必须将其添加为资源，文档如下所示：

取自here

所以在代码中你必须把这一行放在你的 App.tsx 上：

        <ResourceGuesser name="gaz_stations"/>

您引用的字段将从 API 中提取