React-admin：<ReferenceInput> 不适用于自定义数据提供者

Question

我正在尝试将 <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 上的样子：

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

Answer 1

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

为了避免某些邮件出现这种情况，例如来自您无法控制的数据源（如 Web 服务器）的错误消息，我们可以在初始化时向 Polyglot 添加使用 allowMissing 选项。
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} )}

Answer 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>

React-admin：<ReferenceInput> 不适用于自定义数据提供者

React-admin: <ReferenceInput> doesn't work with custom dataProvider

reactjs

react-admin