React JS：检查对象上的每个项目是否为真，然后添加图标

Question

所以我在这里有这个测试虚拟数据：

{

    _id: "1",

    name: "Lakawon Island Resort",

    price_per_night: 2804.0,

    description:

      "On a lush 16-hectare island with white-sand beaches, this relaxed resort is 5 km from the jetty in Cadiz Viejo, a village on the mainland.",

    address: "Cadiz Viejo",

    city: "New York",

    state: "New York",

    zip_code: "6121",

    latitude: 11.045411,

    longitude: 123.201465,

    phone: "[phone]",

    email: "[e-mail]",

    website: 'www.lakawonislandresort.us',

    amenities: 

      {

        tv: false,

        reservation: false,

        cabin: true,

        services: true,

    },

    image:

      "https://images.unsplash.com/photo-1512356181113-853a150f1aa7",

    rating: 4.5,

    reviews: 11,

  },

请注意，我有这个对象amenities，它也是一个对象。目前我有 4 个子对象tv，reservation和cabin。services

我需要的是检查每个项目是否为真，如果它们确实为真，则返回对象的键并在其旁边添加一个超棒的字体图标。否则，如果该值为 false，则不执行任何操作或返回 null。

到目前为止，这是我的实现方式：

{

amenities && Object.entries(amenities).map(

    ([key, value]) => {

        if(key === 'tv' && key[value] === true){

            return `<p><i class="fa fa-tv"></i>  ${key}</p>`

        } else if (key === 'reservation' && key[value] === true){

            return `<p><i class="fa fa-reservation"></i>  ${key}</p>`

        }else if (key === 'cabin' && key[value] === true){

            return `<p><i class="fa fa-cabin"></i>  ${key}</p>`

        }else if (key === 'services' && key[value] === true){

            return `<p><i class="fa fa-service"></i>  ${key}</p>`

        }

        

       return null

    }

)

}

但是，这不起作用，而是返回错误Can't map through object。

知道如何检查每个键是否为真，然后如果值为真，则在其旁边输出各自的 fontawesome 图标？有没有比 if else 语句更有效的方法来做到这一点？

Answer 1

你可以做更多的速记{amenities &&  Object.keys(amenities)    .filter((key) => amenities[key])    .map((key) => {      if (key === "tv") {        return (          <p>            <i class="fa fa-tv"></i> {key}          </p>        );      } else if (key === "reservation") {        return (          <p>            <i class="fa fa-reservation"></i> {key}          </p>        );      } else if (key === "cabin") {        return (          <p>            <i class="fa fa-cabin"></i> {key}          </p>        );      } else if (key === "services") {        return (          <p>            <i class="fa fa-service"></i> {key}          </p>        );      }    })}为什么以及如何：基本上，如果您只需要测试您的键是否 === 'something' 并检查该值是真还是假，您可以这样做：首先过滤对象，使其只保留真值。然后在你的 .map() 上你会知道你得到了真实的键，所以你只需要根据键值处理条件渲染.filter((key) => amenities[key]) // will filter out every values not truthymyCurrentKey: '' // 会被过滤掉myCurrentKey: 1 // 不会被过滤掉另外，对于我的观点，当你有你想要渲染的对象时，尝试首先使用 Object.keys().map()，这是简单的方法和更易读的方法，除非你需要真正定制的东西，您可以使用 Object.entries，否则。

Answer 2

可以这样做：const { amenities = {} } = resort;return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {Object.keys(amenities).map(item => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return amenities[item] ? <p><i class={`fa fa-${item}`}></i>{item}</p> : null;&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>)但我认为这里并不真正需要映射，你可以保持简单：const { amenities = {} } = resort;return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {amenities.tv && <p><i class="fa fa-tv"></i>tv</p>}&nbsp; &nbsp; &nbsp; &nbsp; {amenities.reservation && <p><i class="fa fa-reservation"></i>reservation</p>}&nbsp; &nbsp; &nbsp; &nbsp; {amenities.cabin && <p><i class="fa fa-cabin"></i>cabin</p>}&nbsp; &nbsp; &nbsp; &nbsp; {amenities.services && <p><i class="fa fa-service"></i>services</p>}&nbsp; &nbsp; </div>)

Answer 3

尝试这个：amenities && Object.entries(amenities).filter(([key,value]) =>&nbsp; value === true).map(&nbsp; &nbsp; ([key]) => {&nbsp; &nbsp; &nbsp; &nbsp; switch(key){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'tv':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <p><i class="fa fa-tv"></i> {key}</p>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'reservation':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <p><i class="fa fa-reservation"></i> {key}</p>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'cabin':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <p><i class="fa fa-cabin"></i> {key}</p>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'services':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <p><i class="fa fa-services"></i> {key}</p>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })我认为你的问题是你使用key[value]whenkey是一个字符串并且value是一个布尔值