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 truthy

myCurrentKey: '' // 会被过滤掉

myCurrentKey: 1 // 不会被过滤掉

另外，对于我的观点，当你有你想要渲染的对象时，尝试首先使用 Object.keys().map()，这是简单的方法和更易读的方法，除非你需要真正定制的东西，您可以使用 Object.entries，否则。

Answer 2

可以这样做：

const { amenities = {} } = resort;

return (

    <div>

        {Object.keys(amenities).map(item => {

            return amenities[item] ? <p><i class={`fa fa-${item}`}></i>{item}</p> : null;

        })}

    </div>

)

但我认为这里并不真正需要映射，你可以保持简单：

const { amenities = {} } = resort;

return (

    <div>

        {amenities.tv && <p><i class="fa fa-tv"></i>tv</p>}

        {amenities.reservation && <p><i class="fa fa-reservation"></i>reservation</p>}

        {amenities.cabin && <p><i class="fa fa-cabin"></i>cabin</p>}

        {amenities.services && <p><i class="fa fa-service"></i>services</p>}

    </div>

)

Answer 3

尝试这个：

amenities && Object.entries(amenities).filter(([key,value]) =>  value === true).map(

    ([key]) => {

        switch(key){

            case 'tv':

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

            case 'reservation':

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

            case 'cabin':

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

            case 'services':

                return <p><i class="fa fa-services"></i> {key}</p>;

            default:

                return null;

        }

    })

我认为你的问题是你使用key[value]whenkey是一个字符串并且value是一个布尔值