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

Posted 2023-02-22

【中文标题】React.js 迭代对象而不是 Object.entries 的正确方法

【英文标题】：React.js right way to iterate over object instead of Object.entries

【发布时间】：2017-04-18 10:43:12

【问题描述】：

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

我对名称、价格、描述的值没有任何问题，因为我知道它们应该在哪里呈现，并且我可以使用 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>
    );
  

【问题讨论】：

@Endless：这个问题基本上和React没有关系。

如果您使用的是 Babel 之类的编译器，只要您的配置设置正确，就不必担心。

【参考方案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.
)

【讨论】：

是否还有一种优雅的方式来排除__typename？

@meadlai 您需要将匿名函数转换为箭头函数。所以，而不是function(keyName, keyIndex) ... 你需要做(keyName, keyIndex) => ...

nadavvadan：“__typename 字段是所谓的“元字段”（GraphQL 规范的一部分），它为其自省（和类似功能）提供动力。它表示 GraphQL 对象类型的名称是询问。” （引用自spectrum.chat/graphql/general/… ）

这个例子真的很简单，没有解释。

@JGallardo - 我觉得它简单且不言自明。欢迎提出修改建议

【参考方案2】：

react 中的完整函数渲染

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

【讨论】：

有没有办法在 JSX 大括号内而不是作为函数来执行此操作？