使用object.entries显示JavaScript对象中的元素

Question

https://codepen.io/itsjustcarlos/pen/OJNqWqv

我正在尝试在<div>列表中显示一个JSON对象，JSON看起来像这样：

const build = {
"brand":[
{"label":"brand","value":360000022888}
],
"status":[
{"label":"New","value":"new"},
{"label":"Open","value":"open"}
],
"assigned":[
{"label":"assigned","value":true}
],
"language":[
{"label":"English, American","value":"en"},
{"label":"Traditional Chinese","value":"zh-tw"}
],
"priority_level":[
{"label":"Low","value":"low"}
]
}

我正在尝试使用Object.entries循环浏览它们以显示它们，我可以console.log值，但它们不会在页面上呈现

return (
<div>
{
Object.entries(build).map((key, value) => { 
{console.log(key[0])}
<>
<div className =''>{key[0]}</div>
{

value[1]?.map((row, i) => (
<>
<div className ='w-3/4 text-sm text-gray-600 bg-gray-900 border-b border-black '> 
{row.label} 
</div>
))
</>
}
</>
})
} 
</div>
)

Answer 1

Object.entries()返回一对[key，value]。在映射时使用析构函数获取它们。

示例：

Object.entries(build).map(([key, values]) => ...)

const F = React.Fragment // the snippet doesn't support <></>
const Demo = ({ build }) => (
<div>
{Object.entries(build)
.map(([key, values]) => (
<F>
<div className="key">{key}</div>
{values.map(row => (
<div key={row.label}>{row.label}</div>
))}
</F>
))
}
</div>
)

const build = {"brand":[{"label":"brand","value":360000022888}],"status":[{"label":"New","value":"new"},{"label":"Open","value":"open"}],"assigned":[{"label":"assigned","value":true}],"language":[{"label":"English, American","value":"en"},{"label":"Traditional Chinese","value":"zh-tw"}],"priority_level":[{"label":"Low","value":"low"}]}
ReactDOM.render(
<Demo build={build} />,
demo
)

.key {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="demo"></div>

Answer 2

如果您在控制台上检查以下结果，您可以看到它显示了string值的Array中的所有标签：

const build = {"brand":[{"label":"brand","value":360000022888}],"status":[{"label":"New","value":"new"},{"label":"Open","value":"open"}],"assigned":[{"label":"assigned","value":true}],"language":[{"label":"English, American","value":"en"},{"label":"Traditional Chinese","value":"zh-tw"}],"priority_level":[{"label":"Low","value":"low"}]}
const result = Object.entries(build)
.map((key, value) => key[0])
console.log(result);

基于此，您可以使用.map()来渲染组件中的JSX元素：

return <>
<h1>Labels:</h1>
<div>
{
result.map((label, index) => 
<div key={index}> 
{label} 
</div>
)
}
</div>
</>

在渲染的<div>元素中，您可以看到index属性，其目的是消除React中的警告。进一步阅读文档中的列表和密钥。

Answer 3

使用norbitrial作为跳起点并计算出

const values = Object.values(build)
.map((key, value) => key)

return (
<div>
{ result.map((label, index) => 
<div key={label}> 
{label} 
</div>)}

{ values.map((label, index) => 
label.map((entry, i) => 
<div>{entry.label}</div>

)


)}