reactjs - React-admin:<ReferenceInput>不适用于自定义dataProvider

我试图将<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上的外观如下：




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

最佳答案

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

为了避免某些消息出现这种情况，例如来自不受控制的数据源（例如网络服务器）的错误消息，我们可以在初始化时使用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} )}

关于reactjs - React-admin:<ReferenceInput>不适用于自定义dataProvider，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60785020/