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

问题描述

我正在使用反应功能组件。当我运行 react 时，它会输出此错误 "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>
    );

})}

解决方法

你可以这样写

{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>
    );
})}

,

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

{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>
    );