Установка defaultValue после визуализации Select ничего не делает - PullRequest
Новая
       12

Установка defaultValue после визуализации Select ничего не делает

0 голосов
/ 16 апреля 2019

Я использую React-Select , где параметры поступают с сервера (не жестко закодированы на стороне клиента).

После получения результата с сервера параметры правильно заполняются в Select, но defaultValue игнорируется .

Упрощенный пример: 

var fruits = [];
var defaultFruit = null;

useEffect(() => {
    setTimeout(() => {
        fruits = [{value: 1, label: 'Apple'}, {value: 2, label: 'Orange'}],
        defaultFruit = {value: 2, label: 'Orange'}  // this doesn't do anything
    }, 1000);
}, []);

return (
    <Select name='fruit' options={fruits} defaultValue={defaultFruit} />
);

Я что-то упустил?
Есть ли способ установить значение динамически?

РЕШЕНИЕ:

Мы нашли решение! В нашем случае мы просто сначала показываем «Загрузка ...», и визуализируем форму только после того, как получим все параметры.

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Как сказал Винаяк Шеной в своем ответе: Ваш defaultValue должен иметь тип object со стандартными атрибутами value и label (может быть изменен реквизитами getOptionValue и getOptionLabel).

Но пропеллер defaultValue используется только для установки значения при начальном рендеринге и неуправляемого компонента Select.Если вы хотите контролировать значение, вам следует рассмотреть возможность использования реквизитов value и onChange.

1 голос
/ 16 апреля 2019

Вы должны дать defaultFruit = {value: 2, label: 'Orange'}. Это должен быть один из объектов из массива. Если вы не знаете, какой будет метка 2 (как она получена с сервера), вы можете сделать fruits.filter(fruit=> fruit.value===2), получить этот объект и установить его как defaultFruit.

...