React.js正確的方式來遍歷對象，而不是Object.entries

我不喜歡使用Object.entries(object).map((key, i)，因爲我發現這是一個ECMAScript 7的實驗性技術，我覺得生產上可能會出錯。有沒有任何原生的JavaScript替代品？React.js正確的方式來遍歷對象，而不是Object.entries

我對名稱，價格，描述的價值沒有任何問題，因爲我確切地知道它們應該呈現在哪裏，我可以使用Populate.key訪問它們，但對於特性，我需要識別對象並呈現兩個鍵和價值。

我試圖使用Object.keys(priceChars).map(function(key, i)，但不知道如何將鍵與價值分開。就像，它是渲染「性能500」，但我需要性能詞是在圖標類中，500是一個實際值要顯示。

我的JSON結構

const Populate = { 
    'name': "Product", 
    'price': "1000", 
    'description': "Product description", 
    'characteristics': { 
    'performance': '500', 
    'pressure': '180', 
    'engine': '4', 
    'size': '860*730*1300', 
    'weight': '420' 
    } 
}

和組件

class PriceBlock extends Component { 
    render() { 
    const {priceName, priceDesc, priceVal, priceChars} = this.props; 
    const characteristics = Object.entries(priceChars).map((key, i) => { 
     return (
     <div className="price__icon-row" key={i}> 
      <i className={'ico ico-' + key[0]}></i> <span>{key[1]}</span> 
     </div> 
    ); 
    }); 
    return (
     <div className="col-5 price__block"> 
     <div className="price__name">{priceName}</div> 
     <div className="price__description">{priceDesc}</div> 
     <div className="price__icons"> 
      {characteristics} 
     </div> 
     <div className={ managePriceClass(priceVal) }>{priceVal}</div> 
     </div> 
    ); 
    } 
}

來源

2016-12-03 Sergey Khmelevskoy

@Endless：這個問題已經基本無關的反應。 –

如果您使用的是像Babel這樣的編譯器，只要您的配置設置正確，就不應該擔心。 – Dom

a = { 
    a: 1, 
    b: 2, 
    c: 3 
} 

Object.keys(a).map(function(keyName, keyIndex) { 
    // use keyName to get current key's name 
    // and a[keyName] to get its value 
})

來源

2016-12-03 17:43:26 nadavvadan

謝謝@nadavvadan！ –

非常優雅和簡潔的解決方案。雖然我應該注意，通過a.keyName訪問會導致錯誤，因爲在對象a中實際上沒有名爲'keyName'的鍵。相反，當訪問值 – tormuto

時，堅持一個[keyName]哦，我怎麼沒有注意到這一點。謝謝@tormuto！ – nadavvadan

React.js正確的方式來遍歷對象，而不是Object.entries

回答

相關問題