Установка значения по умолчанию с помощьюact-select не работает

Question

У меня есть простой компонент React, который получает начальное состояние:

this.state = {
  currentObject: {
    isYounger: false
  }
}

Затем я отрисовываю react-select со значением по умолчанию this.state.currentObject.isYounger:

    <Select
      name={"age"}
      value={this.state.currentObject.isYounger}
      onChange={newValue => this.addIsYoungerValue(newValue)}
      options={isYoungerOptions}
    />

Дляпо какой-то причине значение не установлено.Почему это так?

Codesandbox

Версия:

"react-select": "^2.4.2",

Answer 1

Здесь проблема не в выборе состояния, а в том, что метка не отображается.

Итак, согласно вашей функции addIsYoungerValue вы устанавливаете значение this.state.currentObject.isYounger для всего объекта.то есть { value: true, label: "Younger" }.Таким образом, проблему можно решить, изменив значение начального состояния ниже.

this.state = {
      array: [],
      currentObject: {
        isYounger: { value: true, label: "Younger" }
      }
    };

И, наконец, появится метка значения по умолчанию ..

Answer 2

Ваши defaultValue или value должны быть объектами. В вашем случае так:

defaultValue={isYoungerOptions[0]}

или

this.state = {
   array: [],
   currentObject: {
     isYounger: { value: "true", label: "Younger" }
   }
 };

Здесь живой пример .