Reactjs 使用react select from API填充我的选项数据？

当我试图用从API获取的数据填充数据时，这似乎不起作用。我目前正在获取数据，将其存储在我在构造函数中实例化的名为ProductsAndAirlines的数组中，然后在选项中动态设置数据值，但目前没有。它只插入第一个静态值，即PBS。

代码

 getProductsAndAirlines = _ => {
    fetch('http://localhost:4000/allProductAndAirlineValuesInJira')
    .then(res => res.json())
    .then( res =>  
        this.setState({ ProductsAndAirlines: res.data }
    ))
    .catch(err => console.error(err))

  }
 componentDidMount() {

    this.getAirlines();
    this.getProductsAndAirlines();
    setTimeout(() => {
      this.setState({ show: true });
    }, 10);



  }
const optionsProduct = [

       ProductsAndAirlines && ProductsAndAirlines.projects && Object.keys(ProductsAndAirlines.projects).map((issue, i) => (

        ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues  && Object.keys(ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues ).map((product, product_index) => (
          {value: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value, label: ProductsAndAirlines.projects[0].issuetypes[0].fields.customfield_11600.allowedValues[product_index].value}

        ))

      ))
render(){

 <Select
  placeholder  = {this.state.Product}
  onChange={this.handleChangeProduct}
  options={optionsProduct()}                              
 />
}

getProductsAndAirlines=\u=>{
取（'http://localhost:4000/allProductAndAirlineValuesInJira')
.then（res=>res.json（））
。然后（res=>
this.setState（{ProductsAndAirlines:res.data}
))
.catch（err=>console.error（err））
}
componentDidMount（）{
这个。getAirlines（）；
这是.getProductsAndAirlines（）；
设置超时（（）=>{
this.setState（{show:true}）；
}, 10);
}
常量选项产品=[
ProductsAndAirlines&&ProductsAndAirlines.projects&&Object.keys（ProductsAndAirlines.projects）.map（（问题，i）=>(
ProductsAndAirlines.Project[0].issuetypes[0].fields.customfield_11600.allowedValues&&Object.keys（ProductsAndAirlines.Project[0].issuetypes[0].fields.CustomFields_11600.allowedValues）.map（（产品、产品索引）=>(
{value:ProductsAndAirlines.projects[0].issueType[0].fields.customfield_11600.allowedValues[product_index].value，标签：ProductsAndAirlines.projects[0].fields.customfield_11600.allowedValues[product_index].value}
))
))
render（）{
}

这可能是因为您的map函数不知何故是错误的。如果您深入查看，您可以检查products和airlines.projects中的每个键，map函数将返回一个全新的数组。最后，选项如下

[
 [{ value: 'PBS', label: 'PBS' },
      { value: 'Pairing', label: 'Pairing' },
      { value: 'MPP - Insight', label: 'MPP - Insight' },
      { value: 'BLISS', label: 'BLISS' },
      { value: 'Shiftlogic', label: 'Shiftlogic'}
 ]],
    [{ value: 'PBS', label: 'PBS' },
      { value: 'Pairing', label: 'Pairing' },
      { value: 'MPP - Insight', label: 'MPP - Insight' },
      { value: 'BLISS', label: 'BLISS' },
      { value: 'Shiftlogic', label: 'Shiftlogic'}
    ]]
]

---

你能给我们举一个例子说明你的API返回的

这个.state.products和airlines.project

数据吗？嗯，你能再看一下我的代码吗？我用动态数据更新了它，当我console.log它时，它会从API打印我的数据值，所以不必担心，但是在我的reactselect中列表是空的，据我所见，这s代码不再工作。您正在render方法之外创建optionsProduct，它是一个常量，您正在作为选项属性的函数调用。我必须将该常量放入render方法中，创建一个新的空数组，然后在调用我的for循环时推送它