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

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

慕斯王 2023-06-15 10:06:16
所以我在這里有這個測試虛擬數(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,  },請注意,我有這個對象amenities,它也是一個對象。目前我有 4 個子對象tv,reservation和cabin。services我需要的是檢查每個項(xiàng)目是否為真,如果它們確實(shí)為真,則返回對象的鍵并在其旁邊添加一個超棒的字體圖標(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    })}但是,這不起作用,而是返回錯誤Can't map through object。知道如何檢查每個鍵是否為真,然后如果值為真,則在其旁邊輸出各自的 fontawesome 圖標(biāo)?有沒有比 if else 語句更有效的方法來做到這一點(diǎn)?
查看完整描述

3 回答

?
達(dá)令說

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

你可以做更多的速記


{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() 上你會知道你得到了真實(shí)的鍵,所以你只需要根據(jù)鍵值處理?xiàng)l件渲染

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

myCurrentKey: '' // 會被過濾掉

myCurrentKey: 1 // 不會被過濾掉

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


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

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

可以這樣做:


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)為這里并不真正需要映射,你可以保持簡單:


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>

)


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

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

嘗試這個:


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)為你的問題是你使用key[value]whenkey是一個字符串并且value是一個布爾值


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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