web-dev-qa-db-fra.com

React.js est le bon moyen de parcourir un objet au lieu de Object.entries

Je n'aime pas utiliser Object.entries(object).map((key, i) parce que j'ai découvert qu'il s'agit d'une technologie expérimentale d'ECMAScript 7 et que quelque chose peut mal tourner en production. Existe-t-il une alternative javascript native?

Je n'ai aucun problème avec les valeurs nom, prix, description car je sais exactement où elles doivent être rendues et je peux y accéder avec Populate.key, mais pour les caractéristiques, j'ai besoin de savoir lire plus avec objet et de rendre la clé et la valeur.

J'ai essayé d'utiliser Object.keys(priceChars).map(function(key, i) mais je ne comprenais pas comment séparer la clé de la valeur. Par exemple, il rendait "performance 500", mais j'ai besoin que Word soit dans une classe d'icônes, et 500 est une valeur réelle à afficher.

Ma structure JSON

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

Et composant

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>
    );
  }
}
javascriptreactjsecmascript-6
24
Sergey Khmelevskoy
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
})
70
nadavvadan