React-final-form с автозаполнением UI материалов

Я сделал этот компонент

const AutocompleteAdapter = ({ input, ...rest }) => (
  <Autocomplete
    {...input}
    {...rest}
    forcePopupIcon={false}
    renderInput={params => <TextField {...params} {...input} {...rest} />}
  />
);

и пытаясь отобразить его внутри

<Field
    required
    name="coach"
    label="Coach"
    type="text"
    placeholder="Enter Coach"
    helperText="coach's email"
    validate={composeValidators(required, email)}
    className={classes.field}
    options={mockEmails}
    getOptionLabel={option => option}
    component={AutocompleteAdapter}
 />

Мой список mockEmails относится к этому типу -> const mockEmails = ['[email protected]', '[email protected]']

The list is rendered under the autocomplete field but when im typing it dont filter the results, and if i choose one mail of the list i get this error
Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.
The component expect a string but received number.
For the input option: 0, `getOptionLabel` returns: 0.

reactjs javascript debugging material-ui react-final-form
person kostis podaras    schedule 19.05.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я столкнулся с ошибкой того же типа во время создания настраиваемого компонента автозаполнения в response-admin (который использует форму response-final-form под деревом).

Каждый раз, когда я выбирал свой вариант, значение, присвоенное функции getOptionLabel, всегда было 0 (и поэтому я получил ту же ошибку).

Чтобы исправить это, я добавил свойство Autocomplete onChange, чтобы использовать свойство response-final-form input.onChange (https://final-form.org/docs/react-final-form/types/FieldRenderProps#inputonchange)

В вашем случае это может быть что-то вроде этого (не проверено):

import (useField) from 'react-final-form'

const Field = (props) => {

    const {name, ...restProps} = props
    const {input, meta} = useField(name)

    return (
        <Field
            ...
            onChange={(event, option) => (input.onChange(option)}
            ...
        />
    )
}
person Jam    schedule 29.12.2020