Я учусь реагировать и столкнулся с react-select поведением, которое я не могу понять.

У меня есть компонент react-select, значения которого извлекаются из вызова API. Если я использую defaultValue, тогда он не выбирает это значение из раскрывающегося списка, но если я использую value, он выбирает значение для раскрывающегося списка.

Я просто не понимаю, почему defaultValue не работает.

<Select
  key={`dropdown`}
  options={options}
  onChange={onSelect}
  defaultValue={defaultValue} />

Где «параметры» передаются как реквизиты от другого компонента, откуда они извлекаются из вызова API.

defaultValue также передается как опора и имеет такую ​​структуру:

defaultValue = {
  label: `Test label`,
  value: `Test value`
}

Но теперь, если я изменю компонент выбора, например

<Select
  key={`dropdown`}
  options={options}
  onChange={onSelect}
  value={defaultValue} />

Теперь работает нормально.

Так в чем разница value и defaultValue. Почему defaultValue не может установить опцию в реакции выбора.

0
lazydev 8 Мар 2019 в 18:20

1 ответ

Лучший ответ

Вам следует отложить рендеринг элемента <Select> до тех пор, пока ваш API не вернет данные options. Вот один из подходов, который может сработать для вас:

/* options is null/undefined until API sets value to an array */
renderSelect(options) {
  if (options == null) return null;

  return <Select
    key={`dropdown`}
    options={options}
    onChange={onSelect}
    value={defaultValue} />
}
0
Wex 9 Мар 2019 в 19:31