使用 Object.entries 显示 JavaScript 对象中的元素答案

【问题标题】：Display elements from JavaScript object with Object.entries使用 Object.entries 显示 JavaScript 对象中的元素
【发布时间】：2020-09-25 20:24:21
【问题描述】：

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>
 )

【问题讨论】：

React 不渲染对象。而是迭代一个数组。

标签： javascript reactjs object jsx

【解决方案1】：

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

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 的警告。在文档中进一步了解List and Keys。

【讨论】：

谢谢，我会为 key[1] 做什么？

【解决方案2】：

使用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>
           
           )
  
           
           )}

【讨论】：

【解决方案3】：

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>

【讨论】：