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

回答

相关问题