ReactJs 在 optgroup 中显示数据

Question

this.props.datacat.map(singleData=>{

  return Object.keys(singleData).map((key,i) =>{

     if(key==='name'){

        return <OptGroup label  = {singleData[key]}>

     }else{

        return <Option key= {key} >{singleData[key]}</Option> 

     }

        return </OptGroup>

  })

})

(this.props.datacat) 的数据

[

  {

    "4967": "Others.",

    "4968": "Sports & Beachwear > Others.",

    "4969": "Lingerie & Nightwear > Others.",

    "4971": "Pants & Shorts > Others.",

    "name": "Women Clothes"

  },

  {

    "4798": "Supplements > Others.",

    "4802": "Men's Grooming > Others.",

    "4952": "Others.",

    "4953": "Medical Supplies > Others.",

    "4954": "Personal Pleasure > Others.",

    "4955": "Personal Care > Others.",

    "4956": "Pedicure & Manicure > Others.",

    "6647": "Lips > Lip Tint"

    "name": "Health & Beauty"

  }

]

上面的代码尝试显示数据，如果键是名称，然后创建optgroup标签，否则它将显示选项值中的所有数据。在那之后，选择的值id这是<Option key= {key} >{singleData[key]}</Option>应该的内部期权价值和文字显示的是价值。有人知道怎么做吗 ：（ ？

Answer 1

对于this.props.datacatcreate an 的每个条目OptGroup，然后用该条目的所有选项填充它，除了带有键的选项name：this.props.datacat.map((singleData) => (&nbsp; <OptGroup label={singleData["name"]}>&nbsp; &nbsp; {Object.keys(singleData)&nbsp; &nbsp; &nbsp; .filter(key => key !== "name")&nbsp; &nbsp; &nbsp; .map(key => (&nbsp; &nbsp; &nbsp; &nbsp; <Option key={key}>{singleData[key]}</Option>&nbsp; &nbsp; &nbsp; ))}&nbsp; </OptGroup>));