如何在reactjs中映射对象的顺序编号属性

Question

我有一个代表电子商务项目的对象。

除了item.name,item.number和item.price等正常属性外，每个项目还有20个元数据属性。。item.metadata1Active、item.metadata1Name、item.metadata1等

我需要在每个名为metadataXActive的属性上做某种类型的循环，如果为真，则显示相应的/匹配的metadataXName和metadataX属性。

我有前10个不循环显示:

function unflatten(item) {          
return (
<div className="metabox">
{item.metadata1Active === true ? (<p><label className="metadata">{item.metadata1Name}</label>: <label className="metadata">{item.metadata1}</label></p>) : null}
{item.metadata2Active === true ? (<p><label className="metadata">{item.metadata2Name}</label>: <label className="metadata">{item.metadata2}</label></p>) : null }
{item.metadata3Active === true ? (<p><label className="metadata">{item.metadata3Name}</label>: <label className="metadata">{item.metadata3}</label></p>) : null }
{item.metadata4Active === true ? (<p><label className="metadata">{item.metadata4Name}</label>: <label className="metadata">{item.metadata4}</label></p>) : null}
{item.metadata5Active === true ? (<p><label className="metadata">{item.metadata5Name}</label>: <label className="metadata">{item.metadata5}</label></p>) : null}
{item.metadata6Active === true ? (<p><label className="metadata">{item.metadata6Name}</label>: <label className="metadata">{item.metadata6}</label></p>) : null}
{item.metadata7Active === true ? (<p><label className="metadata">{item.metadata7Name}</label>: <label className="metadata">{item.metadata7}</label></p>) : null}
{item.metadata8Active === true ? (<p><label className="metadata">{item.metadata8Name}</label>: <label className="metadata">{item.metadata8}</label></p>) : null}
{item.metadata9Active === true ? (<p><label className="metadata">{item.metadata9Name}</label>: <label className="metadata">{item.metadata9}</label></p>) : null}
{item.metadata10Active === true ? (<p><label className="metadata">{item.metadata10Name}</label>: <label className="metadata">{item.metadata10}</label></p>) : null}
</div>
);
}

任何帮助都将不胜感激。

Answer 1

因为您知道有20个元数据属性，所以您可以迭代20次，并使用括号表示法和模板文字检查每个属性。

function unflatten(item) {
return (
<div className='metabox'>
{[...Array(20).keys()].map((i) => (
item[`metadata${i+1}Active`] === true
? (<p key={`metadata${i+1}Name`}>
<label className='metadata'>{item[`metadata${i+1}Name`]}</label>:{' '}
<label className='metadata'>{item[`metadata${i+1}`]}</label>
</p>)
: null
))
}
</div>
);
}

Answer 2

您可以这样做:

for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
// do stuff
}
}

就像这个堆栈中的答案一样:https://stackoverflow.com/a/16735184/12792486

Answer 3

您可以使用新的Object.hasOwn方法，该方法检查指定的对象是否具有指定的属性作为其自己的属性。如果属性是继承的，或者不存在，该方法将返回false。

if (Object.hasOwn(obj, 'propertyName')){
// do stuff
}

更多关于Object.hasOwn- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn

Answer 4

如果你的对象项目只有metadaXActive道具，我会建议这个

function unflatten(item) {          
return (
<div className="metabox">`
{{
for (const metadata in item) {
item[metadata] === true ?
// here if true.           
:
// here if false
}
}}
</div>