React 渲染数组键和对象答案

【问题标题】：React render array keys and objectsReact 渲染数组键和对象
【发布时间】：2025-11-25 08:50:01
【问题描述】：

我有一个json-object，里面有多个数组。这些数组有我想在react-view 中呈现的对象。每个数组都有自己的键。我确实设法显示了数组的键，但没有显示数组内的对象。这是我到目前为止得到的：

const Albums = observer(({ state, releases }) => (

  <div className="wrapper">

    { Object.keys(state.releases).map((key, i) => { 
        return <div key={key}><p>{key}</p></div>
            state.releases[key].forEach((album) => {
                return <div album={album}><p>{album}</p></div>;
            })
        })  
    }  
  </div>
))

我在这里遗漏了什么/做错了什么？

** 更新 **

JSON 看起来像这样：

[{
    "Key" : [
        {"id" : "1", "blabla" : "balabla"},
        {"id" : "2", "blabla" : "balabla"},
        {"id" : "3", "blabla" : "balabla"}
    ],
    "Another Key" : [
        {"id" : "4", "blabla" : "balabla"},
        {"id" : "5", "blabla" : "balabla"},
        {"id" : "6", "blabla" : "balabla"}
     ]
 }]

【问题讨论】：

你的 json 对象是什么样的？
“我有一个内部有多个数组的 json 对象” JSON 是一种用于数据交换的文本符号。 (More here.) 如果您正在处理 JavaScript 源代码，而不是处理 string，那么您就不是在处理 JSON。我猜你只是在处理一个包含数组的对象。
@Steve 你能给我们你在代码中使用的相同对象吗？

标签： javascript arrays reactjs

【解决方案1】：

问题是你试图返回多个组件，如果你使用低于 v16.0.0 的 React 版本，你应该将多个组件包装在一个 div 中，或者使用 JSX 语法糖。也使用map 而不是forEach 来返回元素

方法一：包装

const Albums = observer(({ state, releases }) => (

  <div className="wrapper">

    { Object.keys(state.releases).map((key, i) => { 
        return <div>
          <div key={key}><p>{key}</p></div>
            {state.releases[key].map((album) => {
                  return <div album={album}><p>{album}</p></div>;
            })}
           </div>
        })  
    }  
  </div>
))

方法 2：JSX 糖

const Albums = observer(({ state, releases }) => (

  <div className="wrapper">

    { Object.keys(state.releases).map((key, i) => { 
        return [<div key={key}><p>{key}</p></div>,   // returning comma separated array here
            {state.releases[key].forEach((album) => {
                return <div album={album}><p>{album}</p></div>;
            })
            ]
        })  
    }  
  </div>
))

【讨论】：

【解决方案2】：

使用map 而不是返回undefined 的forEach：

const Albums = observer(({ state, releases }) => (
  <div className="wrapper">
    {Object.keys(state.releases).map((key, i) => (
      <div key={key}>
        <p>{key}</p>
      </div>
      {state.releases[key].map((album) => (
        <div album={album}><p>{album}</p></div>
      )}
    )}  
  </div>
));

【讨论】：