javascript - 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 来清楚地说明

示例:

• key 来自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要渲染的元素。

我尝试在前一个 map 函数中编写另一个 map 函数:

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换成 key 就可以了。 groupObj.level_4.1.map()这将返回 level_4.1值:

• level_3.1
  • level_4.1 值
  • level_4.1 值 << 无法映射 level_4.2 并使用 item来自父 map 函数将返回未定义

因此，要么这样做完全错误，要么缺少将动态值传递到 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>
);

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