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

【问题标题】：How to map an object's keys to make JSON easier to handle in React如何映射对象的键以使 JSON 在 React 中更易于处理
【发布时间】：2016-01-07 08:01:39
【问题描述】：

如果我有这个 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 属性。

【问题讨论】：

对于那些投反对票的人，这是我的问题含糊不清吗？我不确定描述文件结构差异的正确方法。任何信息将不胜感激，以提高质量。
stackoverflow.com/help/how-to-ask提问前你搜索和研究了吗？
我做了：我发现了类似的问题，但没有任何东西能真正解释问题所在。不过，您是对的，事后看来，我应该能够使用它们来解决我自己的问题。不过，如果您认为它已被其他地方覆盖，请将其标记为重复。

标签： javascript json reactjs

【解决方案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"}]

【讨论】：

非常感谢。这也是数组和类数组对象之间的区别让我感到困惑。你的地图功能让我意识到我做错了整体。