如何映射对象的键以使JSON更易于在React中处理 [英] How to map an object's keys to make JSON easier to handle in React

问题描述

如果我有这个JSON：

If I have this JSON:

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

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

Then I can render a React component and access the data easily:

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结构如下，我应该如何重新计算渲染函数按我的意愿工作？

If my JSON is structured as below instead, how should I re-factor the render function to work as I want?

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

即我不再需要显示名称属性。

i.e. I no longer have a name attribute to display.

推荐答案

这是你想要的吗？

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

这篇关于如何映射对象的键以使JSON更易于在React中处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！