Question

我有一个json - 对象，里面有多个数组。这些数组包含我想在react - 视图中呈现的对象。每个数组都有自己的密钥。我确实设法显示数组的键，但不是数组中的对象。这是我到目前为止所得到的：

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

Answer 1

使用map而非forEach返回undefined：

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

Answer 2

问题是如果你使用的React版本低于v16.0.0，你试图返回多个不正确的组件，你要么应该包含div中返回的多个组件，要么使用JSX语法糖。也可以使用map代替forEach来返回元素

方法1：包装

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

React渲染数组键和对象

2 个答案: