React Select - ハードコーディングオプションではなく、オプションでAPI呼び出しからデータを表示/反復する方法は？

Question

私はreact-selectを使用していますが、表示するオプションをハードコードしたくありませんが、オプションは、私が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> 
) 
} 
} 

データ（this.state.citiesは、オブジェクトの配列で、次のようになります。ここ

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

... 

Answer 1

問題あなたの配列内のオブジェクトから来ます。react-selectは、それを理解するために以下のキーを持つオブジェクトの配列が必要です： valueおよびlabel。

priteshは単に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> 
) 
} 

ように使用するにはを伝え、指摘のようなので、中にレンダリングし、あなたは

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 }; 
}) 

かを、置き換えることができます

これがあなたを助けてくれることを願っています！

Answer 2

あなたの帰りのコンポーネントでは、単にドキュメントで利用できる設定可能なオプションがたくさんあります

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> 
) 
} 
} 

などのAPIから取得されている都市を渡すことができます。