React.js正确的迭代对象方法是使用Object.keys而不是Object.entries。

Question

我不喜欢使用Object.entries(object).map((key, i)，因为我发现这是ECMAScript 7的一项实验性技术，我觉得在生产环境中可能会出现问题。是否有任何原生JavaScript的替代方法？

对于名称、价格、描述的值我没有问题，因为我知道它们应该渲染在哪里，我可以通过Populate.key访问它们，但是对于特征，我需要遍历对象并呈现键和值。

我尝试使用Object.keys(priceChars).map(function(key, i)，但不了解如何将键与值分开。比如，它会呈现“performance 500”，但我需要把performance单词放在图标类中，而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>
    );
  }
}

- Sergey Khmelevskoy

---

@Endless：这个问题基本上与React无关。 - Felix Kling

如果您正在使用像Babel这样的编译器，只要您的配置正确设置，这不应该是一个问题。 - Dom

Answer 1

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

使用解构和箭头函数的新版本。对于新代码，我会使用这个版本：

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

Object.entries(a).map(([key, value]) => {
    // Pretty straightforward - use key for the key and value for the value.
    // Just to clarify: unlike object destructuring, the parameter names don't matter here.
})

- nadavvadan

---

还有一种优雅的方法可以排除 __typename 吗？ - henk

@meadlai，你需要将匿名函数转换为箭头函数。所以，你需要把function(keyName, keyIndex) { ... }改成(keyName, keyIndex) => { ... }。 - Stavros Zavrakas

__typename字段是所谓的“元字段”（GraphQL规范的一部分），它支持其内省（和类似的功能）。它代表正在查询的GraphQL对象类型的名称。 - Nicolai S

这个例子非常简单，没有任何解释。 - JGallardo

@JGallardo - 我觉得这很简单易懂。如果有建议修改的地方，请随意提出。 - nadavvadan

Answer 2

在React中完善render函数。

const renderbase = ({datalist}) => {
        if(datalist){
            return  Object.keys(datalist).map((item,index) => {
                return(
                  <option value={datalist[item].code} key={index}>
                      {datalist[item].symbol}
                  </option>
                )
            })
        }  
    }

- Aakash Handa

---

有没有办法在JSX的花括号中完成这个操作，而不是将其作为一个函数？ - Noumenon

Answer 3

在JSX函数中，您可以这样做：

export default function ObjectList() {

  item = {
    "a": 1,
    "b": 2
  }

  return(
    {Object.entries(item).map(([key, value]) => (  
      <p>`Key: ${key}, Value: ${value}`</p>
    ))}
  )
}

- sethberickson

---

似乎与五年前的答案完全相同... - Moritz Ringler

@MoritzRingler 有人问是否可以在JSX大括号和函数中实现此操作，而上面的示例都没有这样做。它非常相似，但仅有足够的不同之处，以至于一些人可能更喜欢它而不是其他答案。 - sethberickson