Javascript 将图标图像绑定到其各自的名称，然后进行渲染

我有一系列的便利设施，我试图将每个便利设施与其各自的图标映射在一起，然后进行渲染

但是，在带有class

hotel\u card\u flame\u content\u container\u middle\u container\u communications

的div中没有呈现任何内容，它是空的，而不是执行循环，并且没有输出错误

关于我应该如何处理这件事的想法非常感谢

所有组件代码

我的职能

import wifiIcon from '../../assets/icons/icons8-wi-fi-48.png'
import coffeeIcon from '../../assets/icons/icons8-cafe-50.png'
import AirCondIcon from '../../assets/icons/icons8-air-conditioner-64.png'
import defaultIcon from '../../assets/icons/button-circle-add-512.png'

const iconWithAmenities = [];

function AddIcon(aminityArray) {
    aminityArray.forEach(name=>{

        getIcon(name.toLowerCase());
        function getIcon(a) {
            var lookUpAmenities = {
                'free wifi': function () {
                    return iconWithAmenities.push({ name: name, icon: wifiIcon });
                },
                'free breakfast': function () {
                    return iconWithAmenities.push({ name: name, icon: coffeeIcon });
                },
                'air conditioning': function () {
                    return iconWithAmenities.push({ name: name, icon: AirCondIcon });
                },
                'default': function () {
                    return iconWithAmenities.push({ name: name, icon: defaultIcon });
                }
            };
            return (lookUpAmenities[a] || lookUpAmenities['default'])();
        }

    })
    return iconWithAmenities;
}

allAmenities阵列如下所示

const allAmenities=[“免费wifi”、“免费早餐”、“免费电视”]

反应渲染

<div className="hotel_card_flame_content_container_middle_container_amenities">
   {(AddIcon(allAmenities)).map((amenity, index)=> {
      <div key={index}>
        <div className="hotel_card_flame_content_container_middle_container_amenities_container">
          <div className="hotel_card_flame_content_container_middle_container_amenities_container_first">
            <div className="hotel_card_flame_content_container_middle_container_amenities_container_first_image">
             <img className="hoteCard_icon" src={amenity.icon} />
            </div>
            <div className="hotel_card_flame_content_container_middle_container_amenities_container_first_text">
                {amenity.name}
            </div>

          </div>
         </div>
       </div>
     })}
 </div>


  [1]: https://codepen.io/bihire/pen/abvBeqK

{（AddIcon（allAmenities））.map（（舒适度，指数）=>{
{amencity.name}
})}
[1]: https://codepen.io/bihire/pen/abvBeqK

基本上是map上回调函数的括号

我必须改变这个

 {(AddIcon(allAmenities)).map((amenity, index)=> {})}

对此

 {(AddIcon(allAmenities)).map((amenity, index)=> ())}

---

请提供一个可复制的示例。似乎错误与您发布的代码段无关。可能错误中的

组件

指的是您可能忘记导入的

React.Component

？hh实际上您是对的，但是，在该div中，没有使用class

hotel\u card\u flame\u content\u container\u middle\u container\u commercies呈现任何内容

它是空的@OPearlOK。如果没有一个简单的工作示例，我无法弄清楚发生了什么。我想用var来代替const，例如，``var iconwithprofecilities=[]；````我想会的work@bihireboris，我认为你的密码笔设置错误。我认为您不应该导入

React

和

Component

，而应该使用

class-App扩展React.Component

。还有，所有的图标都来自哪里？