Необходимо указать либо свойство рендера, либо функцию рендеринга в качестве дочерних элементов, либо компонент пропа для поля (авто)

Question

Я получаю сообщение об ошибке при разработке Auto complete с использованием final-form

Необходимо указать либо опору рендеринга, функцию рендеринга в качестве дочерних элементов, либо опору компонента в поле (авто)

Я получаю помощь по этой ссылке https://trejgun.github.io/articles/bindings-for-using-final-form-with-material-ui-autocomplete/

Но когда я реализовал вышеуказанный код, я получаю ошибку выше

вот мой код https://codesandbox.io/s/relaxed-breeze-hv58o

 <Field
              name="auto"
              multiple={true}
              component={AutoCompleteWrapper}
              placeholder="First Name"
              options={[{ label: "The Shawshank Redemption", values: 1994 }]}
            />

Answer 1

В вашем коде и в тестовом окне. js вы экспортируете AutoCompleteWrapper как с именем export:

export const AutoCompleteWrapper = props => {

Но в вашем файле индекса. js, вы импортируете его как по умолчанию :

import AutoCompleteWrapper from "./test";

Таким образом, вы можете исправить это одним из двух способов:

Импорт именованного экспорта

import { AutoCompleteWrapper } from "./test";

Измените экспорт по умолчанию

const AutoCompleteWrapper = props => {
  ...
};

export default AutoCompleteWrapper;