React Select - 如何显示/迭代来自 api 调用选项而不是硬编码选项的数据？

IT技术 reactjs react-select
2021-05-25 19:01:38

我正在使用 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>
  )
 }
}

Data( this.state.cities 是一个对象数组，看起来像：

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

...
3个回答

这里的问题来自数组中的对象。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 };
})

或者，就像 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>
  )
}

希望这可以帮助你！

试试这个 ： 

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

并致电： 

 <Select
    options={this.renderList()}
/>

在您的返回组件中，您可以简单地传递从 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>
)
}
}

文档中有许多可配置的选项。

其它你可能感兴趣的问题
上一篇为什么我的外墙层在这种特定形状上打印有间隙并剥落？ 下一篇如何在不使用任何额外程序/软件的情况下直接从 Raspberry Pi 将 G 代码发送到我的打印机