Question

当我尝试使用从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()}                              
 />
}

Answer 1

可能是因为您的map函数某种程度上是错误的。如果您深入了解，可以检查一下ProductsAndAirlines.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的react-select填充我的选项数据？

1 个答案: