React.js迭代对象而不是Object.entries的正确方法 [英] React.js right way to iterate over object instead of Object.entries

问题描述

我不喜欢使用 Object.entries（object）.map（（key，i）因为我发现这是ECMAScript 7的实验技术我觉得生产中可能出现问题。是否有任何原生的javascript替代品？

I don't like using Object.entries(object).map((key, i) because I found out that this is an experimental technology of ECMAScript 7 and I feel that something may go wrong on production. Are there any native javascript alternative?

我对名称，价格，描述的值没有任何问题，因为我确切地知道他们在哪里应该渲染，我可以使用Populate.key访问它们，但是对于特性，我需要识别对象并渲染键和值。

I have no problems with values of name, price, description because I know exactly where they should be rendered and I can access them with Populate.key, but for the characteristics, I need to literate over object and render both key and value.

我试图使用 Object.keys（priceChars）.map（function（key，i）但不明白如何将键与值分开。就像，它呈现性能500，但我需要将性能词放在图标类中，500是要显示的实际值。

I tried to use Object.keys(priceChars).map(function(key, i) but didn't understand how to separate key from value. Like, it was rendering "performance 500", but I need performance word to be in a icon class, and 500 is an actual value to be displayed.

我的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>
    );
  }
}

推荐答案

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

这篇关于React.js迭代对象而不是Object.entries的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！