React元素 - 数组对象仅返回第一个项目

Question

我正在尝试从包含多个项目的对象中检索项目值。该对象是一个数组对象。我只能在每个数组中而不是所有项目中检索第一个项目及其值而感到困惑。任何人都可以告诉我我在这里缺少什么。

数组对象示例：

{ "ITEM 1": [
 {
   "id": 123,
   "name": "item1a"
 },
 {
   "id": 234,
   "name": "item1b"
 },
 {
   "id": 345,
   "name": "item1c"
 }
],
"ITEM 2": [
{
  "id": 456,
  "name": "item2a"
},
{
  "id": 567,
  "name": "item2b"
},
{
  "id": 678,
  "name": "item2c"
}],
}

我在新元素中有数据，并且在调试时，请参阅循环正确流动，但由于某种原因，只有第一个项目才呈现。

我包裹在HTML元素中的代码如下：

  { Object.keys(this.props.data).map(function (key) {
     var list = component.props.data[key];
     for (i = 0; i < facetParent.length; i++) {
       var item = list[i];
       return ( 
           <CheckBox
               key={item.id}
               data={item}
               name={item.name} />
              )
         }}, this)}

任何建议都非常感谢。

Answer 1

返回函数立即终止函数执行。这就是为什么您只能获得第一项。根据您使用的React版本，您应该创建2个数组并在渲染之前加入它们