React-admin：<ReferenceInput> 不适用于自定义 dataProvider答案

【问题标题】：React-admin: <ReferenceInput> doesn't work with custom dataProviderReact-admin：<ReferenceInput> 不适用于自定义 dataProvider
【发布时间】：2020-03-21 06:18:23
【问题描述】：

我正在尝试将 <ReferenceInput> 元素与自定义 dataProvider 一起使用并收到此错误：

Missing translation for key: "dataProvider is undefined"

即使我的数据提供者看起来像这样，也会发生这种情况：

import jsonServerProvider from "ra-data-json-server";
import { adminPageTokenFetch } from "APIServices/CRUD";

const dataProvider = jsonServerProvider("/api", adminPageTokenFetch);

export const myDataProvider = {
  ...dataProvider
}

使用<ReferenceInput>的组件示例：

export const SessionEdit = (props: any) => {
  return (
    <Edit {...props}>
      <SimpleForm>
        <ReferenceInput source="film" reference="films">
          <SelectInput optionText="name" />
        </ReferenceInput>
        <DateInput source="dateTime" />
        <NumberInput source="price" />
        <ReferenceInput source="genre" reference="genres">
          <SelectInput optionText="name" />
        </ReferenceInput>
      </SimpleForm>
    </Edit>
  );
};

这是我的索引页：

export const AdminPage = (props: { lang: string }) => {
  const messages = {
    ru: russianMessages,
    en: englishMessages
  } as any;

  return (
    <Provider store={createAdminStore({ myDataProvider, history })}>
      <Admin
        dataProvider={myDataProvider}
        history={history}
        title={props.lang === "ru" ? "Админ панель" : "My admin"}
        i18nProvider={polyglotI18nProvider(() => messages[props.lang])}
      >
        <Resource
          name="sessions"
          list={SessionList}
          edit={SessionEdit}
          create={SessionCreate}
        />
        <Resource name="translations" list={TranslationList} />
      </Admin>
    </Provider>
  );
};

这里是createAdminStore函数：

export default ({ dataProvider, history }: any) => {
  const reducer = combineReducers({
    admin: adminReducer,
    router: connectRouter(history)
  });

  const saga = function* rootSaga() {
    yield all([adminSaga(dataProvider)].map(fork));
  };
  const sagaMiddleware = createSagaMiddleware();

  const store = createStore(
    reducer,
    compose(applyMiddleware(sagaMiddleware, routerMiddleware(history)))
  );
  sagaMiddleware.run(saga);
  return store;
};

它在 UI 上的外观：

其他组件仍然可以正常工作。

【问题讨论】：

我们需要仔细查看您的 translation 文件。你能分享其中的一部分吗？
@MwamiTovi , 你的意思是我传入admin 组件的组件吗？如果是这样，我已经编辑了我的问题。
此错误似乎源自链接到dataProvider 的translation。我认为共享与这些链接的文件可能会更有帮助。也许在您使用自定义myDataProvider 的地方共享文件
@MwamiTovi，我正在使用createAdminStore 函数并将其结果传递给admin 组件。刚刚将所有这些内容添加到问题中。
从您的代码中，您正在使用changing locale (language) at Runtime。请在中更新此行 i18nProvider={polyglotI18nProvider((locale) => messages[locale])}。让我知道会发生什么。

标签： reactjs react-admin

【解决方案1】：

默认情况下，polyglotI18nProvider 每次被调用时都会在 console 中记录一个警告，其中包含当前翻译中找不到的消息。

为了避免某些消息出现这种情况，例如来自您无法控制的数据源（如 Web 服务器）的错误消息，我们可以在初始化时将 allowMissing 选项添加到 Polyglot。
Read about react-admin translations here.

// Here, we seem to be missing the complete base url
- const dataProvider = jsonServerProvider("/api", adminPageTokenFetch);

// For dataProvider to be defined, provide the complete base url
+ const dataProvider = jsonServerProvider("http://path.to.my.api", adminPageTokenFetch);

// Add the "allowMissing" option
i18nProvider={polyglotI18nProvider(() => messages[props.lang], {allowMissing: true} )}

【讨论】：

为了进一步了解这个概念，您可以read more directly from polygot.js。
现在控制台中似乎没有出现消息，但仍然弹出错误消息，referenceInput 仍然没有加载其中传递的任何数据。将警告弹出窗口的屏幕截图添加到问题中。
请查看我的更新答案。谢谢。但我仍然感到困惑，为什么即使您只使用 /api 其他组件也能正常工作！
我在我的应用程序中使用了代理，但为什么它在一个组件中工作而在另一个组件中不起作用？）
好问题：为什么在这里工作和失败？然后问题似乎与您的代理有关。 OMG，错过了这个 - 在您的 <ReferenceInput> 中，您使用的是 film 和 genre，它们必须在 <Admin> 中添加为 <Resource>，因为您的应用程序会在引用时尝试获取它们。这应该可以解决我们的问题。你这样做了吗？

【解决方案2】：

不知道它是如何工作的，但在referenceInput下面的更改之后似乎很好：

...
<Provider
      store={createAdminStore({
        dataProvider: Object.assign(myDataProvider),
        history
      })} // changed from createAdminStore({ myDataProvider, history })
    >
    <Admin
        dataProvider={Object.assign(myDataProvider)} // changed from dataProvider={myDataProvider}
        history={history}
        title={props.lang === "ru" ? "Админ панель" : "My admin"}
        i18nProvider={polyglotI18nProvider(() => messages[props.lang])}
    >
        ...
    </Admin>
</Provider>

【讨论】：