用嵌套数组映射数据数组

Question

使用Next.JS与TSX文件反应有一个数据文件设置如下

const fieldMapping = {
category:[
   {
  
    title: "Category 1",
    Subtitle: ["Category 1", "Category 2"],
    SubSubTitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ]
  
  },
  {

    title: "Category 2",
    Subtitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ],
    SubSubTitle: [
      {title: "Category 1", link : "/"},
      {title: "Category 2", link : "/"}, 
      {title: "Category 3", link : "/"}, 
      {title: "Category 4", link : "/"}, 
      {title: "Category 5", link : "/"}, 
      {title: "Category 6", link : "/"}, 
  ]
    
  },
  {
    title: "Category 3",
    Subtitle: ["Category 1", "Category 2"],
    SubSubTitle: [
    {title: "Category 1", link : "/"},
    {title: "Category 2", link : "/"}, 
    {title: "Category 3", link : "/"}, 
    {title: "Category 4", link : "/"}, 
    {title: "Category 5", link : "/"}, 
    {title: "Category 6", link : "/"}, ]
    
  },
  {
    title: "Category 4",
    Subtitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ],
    SubSubTitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ]
  },
  {
    title: "Category 5",
    Subtitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ],
    SubSubTitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ]
    
  },
  {
    title: "Category 6",
    Subtitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ],
    SubSubTitle: ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ]
    
  },

]
}
export default fieldMapping

以及呈现项。

import React, { Component, useEffect } from "react";
import fieldMapping from "./data-mapping";


export default function NavItems(

) {
const renderLists= () =>{
 
    let item = fieldMapping.category;
    return (
        <div>
       <p>{item[0].title}</p>
       <p>{item[0].Subtitle}</p>
       <p>{item[0].SubSubTitle}</p>
    </div>
    )
    };
return (
    {renderLists}
)

}

错误是: Error:对象作为React子对象无效(找到:键为{renderLists}的对象)。如果您打算呈现一个子集合，请使用数组代替。

当单击类别1项显示时，我试图将数据映射到函数。然后，如果单击类别2，项目将显示这是一个导航菜单，因此子类别也将有子类别。我甚至没有尝试过点击操作，因为我一直在用映射得到错误

我们只需列出硬编码的链接，但它很想成为动态的

Answer 1

您不能在标签中显示数组。

{item[0].Subtitle.map(sub => <p>sub</p>)
{item[0].SubSubTitle.map(subSub => <p>subSub</p>)