如何在reactjs中映射物件的按順序編號的屬性

我有一個代表電子商務專案的物件。

除了像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>
    );
}

任何幫助將不勝感激。

uj5u.com熱心網友回復：

您可以執行以下操作：

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

就像這個堆疊中的答案：https : //stackoverflow.com/a/16735184/12792486

uj5u.com熱心網友回復：

由于您知道有 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>
  );
}

uj5u.com熱心網友回復：

您可以使用新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

uj5u.com熱心網友回復：

如果您的物件專案只有 metadaXActive 道具，我會建議這樣做

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

標籤：javascript 反应

上一篇：開發工具向我顯示了這個錯誤“警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具。”請

下一篇：AgGrid渲染空白