React Select - Как показать / перебрать данные из опции вызова API вместо опций жесткого кодирования?

Я использую реакцию-выбор, и я не хочу жестко кодировать параметры, которые должны отображаться, но параметры — это данные, которые я извлекаю из API. Я ничего не могу найти, и то, что я пытался сделать, не работает, так как ничего не отображается. Кто-нибудь знает? Спасибо!!!

API.js:

export function availableCities() {
   return axios.get('/cities').then(function (response) {
      return response.data;
   })
}

Составная часть:

import Select from 'react-select';
import {availableCities} from '../utils/api.js';

class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        selectedOption: '',
        clearable: true,
        cities: [],
     } 
   }
   componentDidMount() {
    availableCities()
        .then(res => {
            this.setState({
                cities: res.Cities.name
            })
            console.log("hello", this.state.cities)
        })
   }

   handleChange(selectedOption) {
    this.setState({selectedOption});
   }
 render(){
    let options = this.state.cities.map(function (city) {
            return city.name;
    })
 return (
      <div>
           <Select
                name="form-field-name"
                value={this.state.value}
                onChange={this.handleChange}
                clearable={this.state.clearable}
                searchable={this.state.searchable}
                options={options}                  
            />
      </div>
  )
 }
}

Data( this.state.cities представляет собой массив объектов и выглядит так:

{code: "LTS", name: "Altus", countryCode: "US", countryName: "United States", regionName: "North America", …}

...

reactjs react-select
person javascripting    schedule 06.12.2017    source источник
comment
Вы назначаете, cities: res.Cities.name. Это правильно? или cities: res.Cities ?   -  person Madhavan.V    schedule 06.12.2017
comment
да, извините, это должны быть города: res.Cities   -  person javascripting    schedule 06.12.2017

Ответы (3)


arrow_upward
12
arrow_downward

Проблема здесь связана с объектами в вашем массиве. react-select для понимания нужен массив объектов со следующими ключами: value и label.

Итак, в рендере вы можете заменить

let options = this.state.cities.map(function (city) {
  return city.name;
})

например,

let options = this.state.cities.map(function (city) {
  return { value: city.countryCode, label: city.name };
})

или, как указал притеш, просто скажите react-select, какие ключи использовать, например

render () {
  return (
    <div>
      <Select
        name="form-field-name"
        value={this.state.value}
        onChange={this.handleChange}
        clearable={this.state.clearable}
        searchable={this.state.searchable}
        labelKey='name'
        valueKey='countryCode'
        options={this.state.cities}                  
      />
    </div>
  )
}

Надеюсь, что это помогает вам!

person 3Dos    schedule 06.12.2017
comment
Вы можете явно установить значение и метку с параметрами valueKey и labelKey, поэтому нет необходимости сопоставлять - person pritesh; 06.12.2017
comment
@pritesh спасибо, что указали на это, я соответствующим образом отредактировал свой пост - person 3Dos; 06.12.2017
comment
Большое спасибо!!! Теперь это работает :) Еще один вопрос: когда я устанавливаю состояние с помощью selectedOption, оно всегда отображается как неопределенное. Когда я присваиваю ему значение, я продолжаю получать ошибки. - person javascripting; 06.12.2017
comment
попробуйте onChange={this.handleChange.bind(this)}, так как this не привязан к функции в контексте eventListener. Другим решением было бы объявить handleChange стрелочной функцией, такой как handleChange = (selectedOption) => {this.setState({ currentOption: selectedOption });}, не забудьте ключ состояния в setState. - person 3Dos; 06.12.2017

arrow_upward
1
arrow_downward

Попробуй это :

renderList() {
 return (this.state.responseData.map(data =>({label:data.Name,value:data.value})))
}

и Звоните:

 <Select
    options={this.renderList()}
/>
person Sumith S Nair    schedule 16.04.2019

arrow_upward
0
arrow_downward

В вашем возвращаемом компоненте вы можете просто передать города, полученные из API, как

import Select from 'react-select';
import {availableCities} from '../utils/api.js';

let isLoadingExternally = false;

class App extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
        selectedOption: '',
        clearable: true,
        cities: [],
    } 
}
componentDidMount() {
    isLoadingExternally = true;
    availableCities()
        .then(res => {
            this.setState({
                cities: res.Cities.name
            }, () => {
                isLoadingExternally = false;
            })
            console.log("hello", this.state.cities)
        })
}

handleChange(selectedOption) {
    this.setState({selectedOption});
}
render(){
return (
    <div>
        <Select
                name="form-field-name"
                value={this.state.value}
                onChange={this.handleChange}
                clearable={this.state.clearable}
                searchable={this.state.searchable}
                labelKey={'name'}
                valueKey={'code'}
                isLoading={isLoadingExternally}
                options={this.state.cities}                  
            />
    </div>
)
}
}

В документации доступно множество настраиваемых параметров.

person pritesh    schedule 06.12.2017