如何映射对象的键以使JSON在React中更易于处理

Question

如果我有此JSON：

{
    'name': 'Active user',
    'config': {
        'status': 'active',
    }
},
{
    'name': 'Paused user',
    'config': {
        'status': 'active',
    }
}

然后，我可以渲染一个React组件并轻松访问数据：

render: function() {
    var panels = [];

    this.props.accounts.forEach(function(account) {
        panels.push(
            <Tabs.Panel title={account.name}>
                <h2>{account.name}</h2>
            </Tabs.Panel>
        );
    });

    return (<Tabs>{panels}</Tabs>);
}
...
React.render(<Tabs accounts={ACCOUNTS} />, document.body);

如果我的JSON的结构如下所示，我应该如何重构该render函数以按需要工作？

{
    'Active User': {
        'config': {
            'status': 'active',
        }
    },
    'Paused User': {
        'config': {
            'status': 'paused',
        }
    }
}

即我不再有name要显示的属性。

Answer 1

这是你想要的吗？

var users = {
    'Active User': {
        'config': {
            'status': 'active',
        }
    },
    'Paused User': {
        'config': {
            'status': 'paused',
        }
    }
};

var usersWithName = Object.keys(users).map(function(key) {
  var user = users[key];
  user.name = key;
  return user;
});

哪里usersWithName=[{"config":{"status":"active"},"name":"Active User"},{"config":{"status":"paused"},"name":"Paused User"}]