如何在 reactJS 中映射字典

How to map a dictionary in reactJS?

本文关键字：映射 字典 reactJS      更新时间：2023-09-26

我正在从在线 api 获取 {{key： object}， {key： object} 形式的字典,...对于大约 1000 个对象}。我想使用 reactJS 做类似的事情 

this.props.dict.map(function(object, key)){
 //Do stuff
}

此映射适用于数组，但显然不适用于字典。我怎样才能实现类似的东西？

如果您面向现代浏览器或使用某种转译器，则可以使用 Object.entry 在单次迭代中映射[key, value]对。

const obj = {
  foo: 'bar',
  baz: 42
}
console.log('Object.entries')
console.log(
  Object.entries(obj)
)
console.log('Mapping')
console.log(
  Object.entries(obj)
  .map( ([key, value]) => `My key is ${key} and my value is ${value}` )
)

与 React 一起使用

Object.entries函数在 React 中非常方便，因为默认情况下没有简单的对象/字典迭代。React 要求你在迭代时为组件分配键，以便执行其差异算法。通过使用 Object.entries您可以利用已键入的集合，而无需在数据中手动注入键或使用数组索引，当索引在筛选、删除或添加项目后发生更改时，这可能会导致意外行为。

请参阅以下 React Object.entries用法示例：

const buttonCaptions = {
  close: "Close",
  submit: "Submit result",
  print: "print",
}
const Example = () =>
  <div>
  {
    Object.entries(buttonCaptions)
    .map( ([key, value]) => <button key={key}>{value}</button> )
  }
  </div>
ReactDOM.render(<Example />, document.getElementById('react'));
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

常见语法错误

作为旁注，请记住，当映射Object.entries的结果时，使用数组解构时，必须将数组参数括在括号中。以下代码将引发语法错误： 

console.log(
  Object.entries({key: 'value'})
  .map([key, value] => `${key}: ${value}`)
)

请改为执行以下操作：

console.log(
  Object.entries({key: 'value'})
  .map( ([key, value]) => `${key}: ${value}` )
)
    
console.log(
  Object.entries({key: 'value'})
  .map(keyValuePair => `${keyValuePair[0]}: ${keyValuePair[1]}`)
)

兼容性

有关当前的浏览器支持，请参阅 2017 特性>对象静态方法下的 ECMAScript 兼容性表。

Javascript中的"字典"被称为对象，你可以以与数组非常相似的方式迭代它们。

var dict = this.props.dict;
for (var key in dict) {
  // Do stuff. ex: console.log(dict[key])
}

如果您正在考虑使用 map，以便在迭代结束时拥有一个完整的数组，那么在 for..in 循环中，您可以推送到您之前声明的数组。 

var dict = this.props.dict;
var arr = [];
for (var key in dict) {
  arr.push(dict[key]);
}

如果你想像往常一样使用map，一个选项是Object.getOwnPropertyNames()：

var newArr = Object.getOwnPropertyNames(this.props.dict).map(function(key) {
    var currentObj = this.props.dict[key];
    // do stuff...
    return val;
});

假设你的意思是：{key: object, key2: object}

你可以做这样的事情(不确定与getOwnPropertyNames的确切差异，但它应该做同样的事情，也许性能较差(：

Object.keys(this.props.dict)
    .map(function(key)){ 
         var object = this.props.dict[key]
         //Do stuff
     })

编辑：

  • Object.getOwnPropertyNames vs Object.keys

如果只想要对象的枚举，请使用Object.keys

相关文章：