React Select - 하드 코딩 옵션 대신 API 호출에서 데이터를 표시/반복하는 방법?

Question

반응 선택을 사용하고 있는데 표시해야하는 옵션을 하드 코딩하고 싶지는 않지만 옵션은 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 지적처럼

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

또는, 단순히 react-select에게 대체 할 수

희망이 도움이됩니다! 반품 구성 요소에서

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에서 페치 도시를 전달할 수 있습니다.