第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

React JS:檢查對(duì)象上的每個(gè)項(xiàng)目是否為真,然后添加圖標(biāo)

React JS:檢查對(duì)象上的每個(gè)項(xiàng)目是否為真,然后添加圖標(biāo)

慕斯王 2023-06-15 10:06:16
所以我在這里有這個(gè)測(cè)試虛擬數(shù)據(jù):{    _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: "(034) 213 6354",    email: "info@example.com",    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,  },請(qǐng)注意,我有這個(gè)對(duì)象amenities,它也是一個(gè)對(duì)象。目前我有 4 個(gè)子對(duì)象tv,reservation和cabin。services我需要的是檢查每個(gè)項(xiàng)目是否為真,如果它們確實(shí)為真,則返回對(duì)象的鍵并在其旁邊添加一個(gè)超棒的字體圖標(biāo)。否則,如果該值為 false,則不執(zhí)行任何操作或返回 null。到目前為止,這是我的實(shí)現(xiàn)方式:{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    })}但是,這不起作用,而是返回錯(cuò)誤Can't map through object。知道如何檢查每個(gè)鍵是否為真,然后如果值為真,則在其旁邊輸出各自的 fontawesome 圖標(biāo)?有沒(méi)有比 if else 語(yǔ)句更有效的方法來(lái)做到這一點(diǎn)?
查看完整描述

3 回答

?
達(dá)令說(shuō)

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊

你可以做更多的速記


{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>

? ? ? ? );

? ? ? }

? ? })}


為什么以及如何:

基本上,如果您只需要測(cè)試您的鍵是否 === 'something' 并檢查該值是真還是假,您可以這樣做:

首先過(guò)濾對(duì)象,使其只保留真值。然后在你的 .map() 上你會(huì)知道你得到了真實(shí)的鍵,所以你只需要根據(jù)鍵值處理?xiàng)l件渲染

.filter((key)?=>?amenities[key])?//?will?filter?out?every?values?not?truthy

myCurrentKey: '' // 會(huì)被過(guò)濾掉

myCurrentKey: 1 // 不會(huì)被過(guò)濾掉

另外,對(duì)于我的觀點(diǎn),當(dāng)你有你想要渲染的對(duì)象時(shí),嘗試首先使用 Object.keys().map(),這是簡(jiǎn)單的方法和更易讀的方法,除非你需要真正定制的東西,您可以使用 Object.entries,否則。


查看完整回答
反對(duì) 回復(fù) 2023-06-15
?
慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

可以這樣做:


const { amenities = {} } = resort;


return (

    <div>

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

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

        })}

    </div>

)

但我認(rèn)為這里并不真正需要映射,你可以保持簡(jiǎn)單:


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>

)


查看完整回答
反對(duì) 回復(fù) 2023-06-15
?
元芳怎么了

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

嘗試這個(gè):


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;

        }

    })

我認(rèn)為你的問(wèn)題是你使用key[value]whenkey是一個(gè)字符串并且value是一個(gè)布爾值


查看完整回答
反對(duì) 回復(fù) 2023-06-15
  • 3 回答
  • 0 關(guān)注
  • 186 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)