Автозаполнение ввода с двумя полями в React-admin? - PullRequest
Новая
       27

Автозаполнение ввода с двумя полями в React-admin?

0 голосов
/ 28 мая 2020

Я создаю сайт с помощью response-admin, и я использовал следующий код для создания AutocompleteInput с идентификатором и описанием, чтобы вы могли искать и то, и другое, и он будет фильтровать параметры. 

const choices = [
        { number: 102, description: 'Furniture' },
        { number: 103, description: 'Rugs' },
        { number: 104, description: 'Plants' },
    ];    
    const optionRenderer = choice => `${choice.number} ${choice.description}`;
        export const ActionsCreate = (props) => (
            <Create title=" " {...props}>
                <SimpleForm>
                    <AutocompleteInput source="casenumber" label="Juttu" choices={choices} optionText={optionRenderer} optionValue="number"/>
                    <TextInput source="billed" label="Tila" />
                    <TextInput source="handler" label="Tekijä" />
                </SimpleForm>
            </Create>
        );

Этот код генерирует следующее: enter image description here Сейчас я пытаюсь сгенерировать то же самое, но варианты не являются статическими c. Варианты выбора относятся к другой таблице в моей базе данных, а «число» - это номер, который свяжет запись, которую я создаю, с этой таблицей «вариантов». Обычно люди используют ReferenceInput и AutocompleteInput, но я думаю, что для этого мне нужно создать настраиваемое поле и получить таблицу с помощью useDataProvider (), поэтому я попробовал следующее: 

const CasesAutocompleteInput = () => {
    const dataProvider = useDataProvider();
    let choices = [];
    const res =  dataProvider.getList('cases', {
        pagination: { page: 1, perPage: 500 },
        sort: { field: 'number', order: 'ASC' },
        filter: { },
    }).then(response => choices = response.data);

    const optionRenderer = choice => `${choice.number} ${choice.description}`;

    return(
        <AutocompleteInput source="casenumber" label="Juttu" choices={choices} optionText={optionRenderer} optionValue="number"/>
    );
};

После этого я использую свой компонент следующим образом: 

export const ActionsCreate = (props) => (
<Create title=" " {...props}>
    <SimpleForm>
        <CasesAutocompleteInput />
        <TextInput source="billed" label="Tila" />
        <TextInput source="handler" label="Tekijä" />

    </SimpleForm>
</Create>

Но при этом компонент AutocompleteInput отображается до того, как данные будут назначены, поэтому данные не попадают в мой компонент. Есть ли способ подождать, пока dataProvider.getList не будет готов, перед отправкой возврата? Я пробовал с wait / asyn c, но проблема в том, что результатом является обещание, а не объект. Я уверен, что близок к решению, но на какое-то время застрял в этом.

...