React 嵌套数组不起作用，无法读取未定义的属性'map'

Question

我使用react功能组件。当我运行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>
);

})}

Answer 1

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

{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 2

你可以这样写

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