React js 中的字典

Question

标题 有谁知道如何在 React js 中映射字典？

 export class ServiceFeatures extends React.Component {
    constructor(props) {
        super(props)
        this.state = {dict: {'awesome': ['wow','alo'], 'great': ['ano', 'alo' ]}}
    }

render() {
    return (
        <div>
            {this.state.dict.map((name, features) => (
              <Services categories={features}></Services>
          ))}
        </div>
    )
}

}

原文由 David Vittori 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Object.keys 映射对象的键。

 return (
    <div>
        {
          Object.keys(this.state.dict).map(name => (
            <Services categories={this.state.dict[name]}></Services>
          ))
        }
    </div>
)

原文由 squgeim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于您的数据，这里是对其进行迭代的解决方案。

 var object= this.state.dict;

for (var property in object) {//properties in your dict
    if (object.hasOwnProperty(property)) {
    console.log("attr: "+ property);
    object[property].map(function(item,index){ // iterate list items of each attribute
              console.log("list item : "+item);
            });
    }
}

输出：

 attr: awesome
 list item : wow
 list item : alo
attr: great
 list item : ano
 list item : alo

参考： 遍历对象属性

原文由 m.rohail.akram 发布，翻译遵循 CC BY-SA 3.0 许可协议