Controlled Select в React не устанавливает defaultValue

Question

У меня есть компонент React, который отображает 3 выбранных элемента.Я хочу установить значение по умолчанию для всех 3, но когда я пытаюсь сделать это, оно не работает.

Я различаю каждый из них, используя переданный в prop названный тип.Тип - это имя каждого элемента выбора.Мой defaultV выводит правильные значения, которые мне нужны для всех трех элементов select.Но когда они отображают defaultValue не устанавливается.DefaultValue для начала пусто, но когда я вхожу в режим редактирования в моем приложении, defaultV добавляется для всех 3, но по какой-то причине defaultValue не устанавливает его для каждого рендера.Мне интересно, это переопределяется предыдущим рендером, поскольку он рендерит 3 раза?Как я мог предотвратить это.

Код

  const defaultV = data.value[type];

  <select
    onChange={onHandleChange}
    id={`${pre}${type}`}
    name={`${pre}${type}`}
    defaultValue={{ label: type, value: defaultV }}
  >
    <option value="" hidden invalid="true">{type}</option>
    {
      dates[type]().map(date => <option key={date}>{date}</option>)
    }
  </select> 

Answer 1

Вы можете напрямую передать значение, которое является значением по умолчанию, в тег select.

Пожалуйста, обратитесь к следующему коду:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'lime'};
  }

  render() {
    return (
      <form>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
       </form>
    );
  }
}

В вашем случае это будет что-то вроде,

const defaultV = data.value[type];

  <select
    onChange={onHandleChange}
    id={`${pre}${type}`}
    name={`${pre}${type}`}
    value={defaultV}
  >
    <option value="" hidden invalid="true">{type}</option>
    {
      dates[type]().map(date => <option key={date} value={date}>{date}</option>)
    }
  </select>