如何在reactJS中映射字典？

Question

我正在以{{key:object},{key:object}的形式从在线api获取字典,...对于类似1000对象}.我想用reactJS来做类似的事情

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

此映射适用于数组,但它显然不适用于字典.我怎样才能达到类似的效果？

Answer 1

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

Answer 2

如果您以现代浏览器为目标或使用某种类型的转换器,您可以使用Object.entries[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要求您在迭代时为组件分配键,以便执行它的diffing算法.通过使用,Object.entries您可以利用已经键入的集合,而无需在数据中手动注入键或使用数组索引,这可能会在过滤,删除或添加项目后索引发生更改时导致意外行为.

请参阅以下Object.entries使用React的示例:

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兼容性表.

Answer 3

如果您想像往常map一样使用，一种选择是Object.getOwnPropertyNames()：

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