DefaultValue и изменение значений в выпадающем списке

Question

В моем приложении реакции у меня есть конечная точка, которая возвращает информацию о пользователе, а другая - страны, и я звоню им обоим в componentDidMount, у меня есть раскрывающийся список стран, и значением / параметром по умолчанию должна быть страна. возвращается из конечной точки сведений о пользователе, и ее параметры должны быть списком стран, возвращаемым из конечной точки стран, проблема в том, что когда я использую атрибут значения для установки значения по умолчанию для выбора, он всегда равен нулю и не показывает значение, поэтому я попытался использовать <option selected="selected">{this.state.country}</option>, но функция onChange не работает, когда я его использую, так что как лучше всего это сделать, вот код:

Использование атрибута значения:

<select value={this.state.country} onChange={this.handleChange}>{this.renderCountries()}</select>

Использование выбранной опции:

<select onChange={this.handleChange}>
  <option selected="selected">{this.state.country}</option>
    {this.renderCountries()}
</select>

Функция OnChange:

handleChange = event => { 
    this.setState({ selectedOption: event.target.value });
};

Параметры рендеринга:

 renderCountries() {
   return this.state.countries.map(country => (
     <option key={country.id} value={country.id}>
       {country.name}
     </option>
    ));
 }

Answer 1

Установите this.state.country на значение, возвращаемое из конечной точки.

<select value={this.state.country} onChange={this.handleChange}> . 
    {this.renderCountries()}
</select>

Для handleChange необходимо установитьState для country, а не selectedOption. Это связано с тем, что атрибут value для выбора имеет значение this.state.country

  handleChange = event => {
    this.setState({ country: event.target.value });
  };

  renderCountries = () => {
    return this.state.countries.map(country => (
      <option key={country.id} value={country.id}>
        {country.name}
      </option>
    ));
  };

Надеюсь, это должно решить вашу проблему.