3 回答

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,否則。

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

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是一個布爾值
添加回答
舉報(bào)