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

return函数会立即终止函数执行。这就是为什么你只得到第一个项目。根据您使用的反应版本，您应该创建2个数组并在渲染之前将它们连接起来