React 映射多个数组

Question

抱歉造成任何混乱。简而言之，我想用无序列表制作几个标题。

<h3>level_3 key title</h3>
<ul>
  <li>level_4 value</li>
  <li>level_4 value</li>
</ul>

<h3> another level_3 key title</h3>
<ul>
  <li>level_4 value</li>
  <li>level_4 value</li>
</ul> 

很难将问题表述为问题。本质上，尝试解析一些 JSON 并正确显示数据非常困难。我想做的是将level_3.x 下面显示为顶级列表项，将嵌套显示level_4.x为嵌套列表项。使用 React 来明确

例子：

• 密钥来自level_3.1
  • 字符串来自level_4.1
  • 字符串来自level_4.2

对每个level_3.x对象重复

示例数据

"level_1":{
  "level_2.1":{
    "level_3.1":{
     "level_4.1":["string","string","string"],
     "level_4.2":["string","string","string"]
    }
    "level_3.2":{
     "level_4.1":["string","string","string"],
     "level_4.2":["string","string","string"]
    }
  }
  "level_2.2":{
     "level_3.1":{
       ... Same as above
    }
     "level_3.2":{
       ... Same as above
    }
  }
}

根据我的理解，因为你只能映射一个数组，所以我所做的就是尝试遍历level_3.x并将它们推送到数组中。我可以对其进行映射并按预期显示项目。

父组件

render(){
  return( <Child heading="A" data={resource.data} /> )
}

子组件

render(){
  let groupObj;
  let groupArray;
  let subListItems;

  if('value' in this.props.data){
    var i;
    for(i = 0; i < Object.keys(groupObj).length; i++){
      groupArray.push(Object.keys(groupObj)[i] + "," + Object.values(groupObj)[i]) 
// Have removed the Object.values because I was trying to make everything flat and pull out the first item. Leaving it in because that was my original direction in the case it was actually the right way to go
    }
  }
  listItems = groupArray.map((item, index)=>(<li key={index}>{item}</li>));

  return({listItems})
}

到目前为止我可以生产：

• level_3.1
• level_3.2

console log > [level_3.1,level_3.2]

这太棒了，而且已经完成一半了。现在问题出在我似乎无法弄清楚如何让元素level_4.x进行渲染。

我尝试在前面的函数中编写另一个地图函数：

listItems = groupArray.map((item, index) => (
   <li key={index}>
     {item}
     <ul>
       {subListItems = groupObj.item.map((subItem, index) => ( 
         <li key={index+1}>{subItem}</li>
       ))};
     </ul>
   </li>
 ));

这会返回未定义错误的映射，但是如果item用键替换它就会起作用。groupObj.level_4.1.map()这将返回一个level_4.1值：

• 等级_3.1
  • level_4.1值
  • level_4.1 value << 无法映射 level_4.2 并且item从父映射函数使用将返回 undefined

因此，要么这样做完全错误，要么缺少将动态值传递到其中的方法groupObj.[needs to be dynamic based on parent].map()

请注意，确实知道用作index键值是一种反模式，只是为了让它发挥作用而将其加入。

更新

感觉这已经是 90% 了，但还有最后一个问题。考虑到这两个答案，对我来说最容易实现和理解我此时输入的内容如下：

render(){

  let listItems;
  let name = this.props.heading

  if('level_2' in this.props.data){

    let data = this.props.data.level_2[name];
    console.log('ok we can get to work', data); // <<< Good

    listItems = Object.keys(data).map((propKey) => (
      <ul key={propKey}>
       {propKey} // <<< Good
       {console.log('PROP KEY', propKey)} // <<< Good
         {data[propKey].map((childPropKey) =>{
           <li key={childPropKey}>
             {childPropKey} // <<<<<< PROBLEM, This returns nothing in the DOM
             {console.log(childPropKey)} // <<< Good
           </li>
         })}
     </ul>
   ));

return(<div>{listItems}</div>)
}

所以我能够console.log(childPropKey)返回预期的结果。但只是试图返回{childPropKey}什么都没有返回

工作 ES5

listItems = Object.keys(data).map(function(propKey){
    return <ul key={propKey}>
      {propKey}
        {data[propKey].map(function(childPropKey){
          return <li key={childPropKey}>
            {childPropKey}
          </li>
        })}
    </ul>
  });

工作 ES6

listItems = Object.keys(data).map((propKey) => (
  <ul key={propKey}>
    {propKey}
    {data[propKey].map((childPropKey) =>(
      <li key={childPropKey}>
        {childPropKey}                 
      </li>
     ))}
  </ul>
));

Answer 1

无需尝试将对象转换为数组，只需将其删除并直接循环遍历 Object.keys 数组即可。

render () (
  <ul>
    {Object.keys(this.props.data).map((propKey) => {
      <li key={propKey}>
        {this.props.data[propKey]}

        <ul>            
          {Object.keys(this.props.data[propKey]).map((childPropKey) => {
            <li key={childPropKey}>
              {this.props.data[propKey][childPropKey]}
            </li>
          })}
        </ul>
      </li>
    })}
  </ul>
);

我对您的数据结构做了一些假设，因此希望您可以将其转化为您的实现。