Проблема автозаполнения пользовательского интерфейса со значением по умолчанию в React

Question

Я использую избыточную форму с полем автозаполнения материала.

Что мне нужно сделать, это:

при загрузке страницы значение автозаполнения будет пустым.

Когда пользователь начинает вводить и набирает до 3 символов, я хочу вызвать API, а результат этого API я хочу показать как автозаполнение dataSource.

Что я пробовал:

Я пытался не устанавливать dataSource и во второй попытке установить dataSource={} в обоих случаях я получил одно и то же сообщение об ошибке:

Неудачный тип опоры: опора dataSource помечен как требуется в AutoComplete, но его значение undefined.**

Код класса Home.js

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import AutoComplete from 'material-ui/AutoComplete';
import {connect} from 'react-redux';

class Home extends Component {

renderAutoComplete = ({
                          input,
                          label,
                          meta: {touched, error},
                          children,
                          ...custom
                      }) => (
    <AutoComplete
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        onChange={(event, index, value) => input.onChange(value)}
        children={children}
        {...custom}
    />

)

render() {

    const startDate = new Date();

    const {handleSubmit} = this.props;

    return (

        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>


            <div>
                <Field name="Origin_1" label="FROM" component={this.renderAutoComplete} dataSource={}/>
            </div>



            <div>
                <button type="submit">
                    Submit
                </button>
            </div>

        </form>

    );

}

}

const LogInForm = reduxForm({
form: 'MaterialUiForm', // a unique identifier for this form
validate
})(Home);
export default connect(mapStateTOProps, {getCity})(LogInForm);

Answer 1

Из демонстрации и комментариев исходного кода вы можете увидеть это значение для dataSourse Свойство должно быть массивом:

/**
 * Array of strings or nodes used to populate the list.
 */
 dataSource: PropTypes.array.isRequired,

так что вы можете сделать следующее:

1. Установите начальное значение dataSource как пустой массив

2. Делать вызов API, когда длина введенного значения будет больше, как 3 символа

3. Обновить dataSource свойство на api ответный звонок

Также имейте в виду, что если вы будете использовать массив объектов для значения dataSourseкаждый объект должен иметь ключи 'text' и 'value':

const dataSource = [
  {text: 'Some Text', value: 'someFirstValue'},
  {text: 'Some Text', value: 'someSecondValue'},
];

или дополнительные dataSourceConfig для отображения:

const dataSourceCustomKeys = [
  {textKey: 'Some Text', valueKey: 'someFirstValue'},
  {textKey: 'Some Text', valueKey: 'someSecondValue'},
];
const dataSourceConfig = {
  text: 'textKey',
  value: 'valueKey',
};

Answer 2

Автозаполнение имеет свойство OnUpdateInput. он работает аналогично свойству keyup. Сигнатура функции будет выглядеть так:function(searchText: string, dataSource: array, params: object) => void searchText будет аргумент, который вы должны передать, чтобы сделать проверку.

Создайте функцию и передайте аргумент и проверьте, соответствует ли аргумент. Длина>=4. например:

check(query){ if(query>=4){ //call API or pass it to actions and then to the reducer and then API }