javascript - 反应嵌套数组不起作用，无法读取未定义的属性“地图”

Question

我正在使用反应功能组件。当我运行反应时，它会输出此错误"TypeError: Cannot read property 'map' of undefined"

样本数据

const tabData = [{
    key: 0,
    label: 'Theory',
    color: 'primary',
    theory: [{
        key: 0,
        title: 'Analyze one dimensional and two dime',
        content: [
                'Kinematics',
                'Rectilinear motion under constant acceleration',
                'Equations of motion',
        ],
    }]
}];

我的功能

{tabData.map((data) => {
    return (
        <TabPanel value={value} index={data.key}>
           <ul index={data.key}>
              {data.theory.map((tit) => {
                 return (<li key={tit.key}>{tit.title}</li>);
              })}
          </ul>
        </TabPanel>
    );

})}

Answer 1

你可以写这样的东西

{tabData && tabData.length > 0 && tabData.map((data) => {
    return (
      <TabPanel value={value} index={data.key}>
        <ul index={data.key}>
        {data && data.theory && data.theory.length > 0 && data.theory.map((tit) => {
          return (<li key={tit.key}>{tit.title}</li>);
        })}
        </ul>
     </TabPanel>
    );
})}

Answer 2

在这种情况下使用可选链接。它更短更干净。

{tabData?.map((data) => {
    return (
      <TabPanel value={value} index={data.key}>
        <ul index={data.key}>
        {data.theory.map((tit) => {
          return (<li key={tit.key}>{tit.title}</li>);
        })}
        </ul>
     </TabPanel>
    );