通过具有可变数量字段的嵌套对象进行映射？

Question

{
    "pagesections": [
        {
            "title": "Executive Board",
            "sections": [
                {
                    "title": "Co-Founders/Co-Presidents",
                    "team": [
                        {
                            "name": "Emily ZhouWang",
                            "designation": "Co-Founder",
                            "image": "../images/sample_image.jpg",
                            "clg": "Junior at UC Berkeley",
                            "linkedin": "",
                            "description": ""
                        },
                        {
                            "name": "Kathleen Kong",
                            "designation": "Co-Founder",
                            "image": "../images/sample_image.jpg",
                            "clg": "Junior at UC Berkeley",
                            "linkedin": "",
                            "description": ""
                        }
                    ]
                },
                {
                    "title": "Directors",
                    "team": [
                        {
                            "name": "Emily ZhouWang",
                            "designation": "Co-Founder",
                            "image": "../images/sample_image.jpg",
                            "clg": "Junior at UC Berkeley",
                            "linkedin": "",
                            "description": ""
                        },
                        {
                            "name": "Kathleen Kong",
                            "designation": "Co-Founder",
                            "image": "../images/sample_image.jpg",
                            "clg": "Junior at UC Berkeley",
                            "linkedin": "","
                        }
                    ]
                },
                {
                    "title": "Co-Founders/Co-Presidents",
                    "team": [
                        {
                            "name": "Emily ZhouWang",
                            "designation": "Co-Founder",
                            "image": "../images/sample_image.jpg",
                            "clg": "Junior at UC Berkeley",
                            "linkedin": "",
                            "description": ""
                        },
                        {
                            "name": "Kathleen Kong",
                            "designation": "Co-Founder",
                            "image": "../images/sample_image.jpg",
                            "clg": "Junior at UC Berkeley",
                            "linkedin": "",
                            "description": ""
                        }
                    ]
                }
            ]
        },
        {
            "title": "Tech Team"
        },
        {
            "title": "Ambassadors"
        }
    ],
}

这是我的 JSON 文件的样子。我正在尝试在以下 React 组件中导入和使用它。一共有三个returns。一个对应于页面部分，另一个对应于部分，最后一个对应于团队。但是好像有错误。我试过使用 this.sections.map() 和 this.team.map() 但它似乎也不起作用。 'team' 和 'sections' 在那种情况下不被识别，但在这里它们被识别但是地图功能似乎不起作用。

{data.pagesections.map((e)=>{  //error is pointed at this line and
                return (
                    <Grid container direction="column" className={classes.root}>      
                        <Grid item className={classes.head1} key={e}>  *//this line
                            <Team_Section title={e.title}/>
                        </Grid>
            
                        {e.sections.map((t)=> {
                            return (
                                <>
                                <Grid item key={t}>
                                    <Section_Head title={t.title}/>
                                </Grid>
                                <Grid item container>
                                    <Grid item xs={1} sm={1} md={2}/>
                                    <Grid container spacing={4} justify="center" item xs={10} sm={10} md={8} align="center">
                                    {t.team.map((g)=>{
                                        return (
                                            <Grid item xs={6} key={g}>
                                                <MediaCard 
                                                    name={g.name}
                                                    designation={g.designation}
                                                    image={g.image}
                                                    clg={g.clg}
                                                    linkedin={g.linkedin}
                                                    description={g.description}/>
                                            </Grid>
                                        );
                                    })}
                                    </Grid>
                                    <Grid item xs={1} sm={1} md={2}/>
                                </Grid>
                                </>
                            );
                        })}
                    </Grid>
                );
            })}

Error: TypeError: Cannot read property 'map' of undefined

Answer 1

您映射数组的所有元素。有两个元素没有嵌套数组映射。

{
   "title": "Tech Team"
},
{
   "title": "Ambassadors"
}

当您尝试映射 e.sections.map 时，没有 sections，因此您尝试映射未定义并得到错误。

您应该过滤数组以排除此类对象，或者添加检查您要映射的数组是否存在。

e.sections && e.sections.map((t) => {...})
t.team && t.team.map((g) => {...})

Answer 2

这里的错误信息很清楚。您试图遍历 undefined，导致您的 data.pagesections 未定义（数组不包含 pagesections 或尚未分配）。

试试这个：

data && data.pagesections && data.pagesections.map(e => {...})

或者如果您使用的是打字稿（或最新的javascript）：

data?.pagesections?.map(e => {...})

也重复内部 map 函数。

Answer 3

您可以使用可选链接，这样您就可以只映射包含数组的对象，而忽略不包含数组的对象


import data from "./data.json";

export default function App() {
  return (
    <div className="App">
      {data.pagesections.map((r) => (
        <>
          <div>{r.title}</div>
          {r.sections?.map((i) => {
            return (
              <>
                {i.team?.map((s) => {
                  return <div>{s.name}</div>;
                })}
              </>
            );
          })}
        </>
      ))}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

附件是代码沙箱：https://codesandbox.io/s/dreamy-mclean-wp3cb?file=/src/App.js:0-536

通过具有可变数量字段的嵌套对象进行映射？

Map through nested object with variable number of fields?

javascript

json

reactjs

react-component

map-function