React map() - 未捕获的类型错误：无法读取未定义的属性“类别”

Posted 2023-02-25

【中文标题】React map() - 未捕获的类型错误：无法读取未定义的属性“类别”

【英文标题】：React map() - Uncaught TypeError: Cannot read property 'categories' of undefined

【发布时间】：2020-08-01 03:14:18

【问题描述】：

变量 appStructure 如下图所示。

当我 console.log(category) 时， 它显示 - Uncaught TypeError: Cannot read property 'categories' of undefined 不知道是不是因为第一次运行useEffect时appStructure的值是[]。

const [structure, setstructure] = useState([]);
const [previewOption, setpreviewOption] = useState([])

useEffect(() =>

    if(structure)
        structure.structure.categories.map(category =>
            console.log(category)
        )
   
,[structure])

【问题讨论】：

初始状态是一个空数组，它没有structure属性（即appStructure.structure未定义）来访问categories属性。

那么“if(appStructure)”对防止这种情况没有用吗？

如果您的应用程序支持，请尝试可选链接。 appStructure?.structure?.categories?.map

(1) 更改初始状态类型以匹配它所填充的内容，对象与数组，以及 (2) 您需要检查您访问的每个属性深度是否存在，例如 appStructure.structure && appStructure.structure.categories && appStructure.structure.categories.map(...如果支持，或者使用可选链接。

【参考方案1】：

useEffect 在组件被挂载并且其依赖数组中的任何值发生变化时被触发。所以当组件挂载时，appStructure 的值是一个空数组，因为它被声明为const [appStructure, setAppStructure] = useState([]);。由于它不是 null 或未定义，它会在您的钩子中传递 if，因此不会找到属性 structure 抛出您所面临的错误。

您可以通过将if 语句更改为：

if(appStructure.structure)

假设您在该对象中总是有categories。

【参考方案2】：

您的appStructure 看起来像一个对象，但您将状态初始化为一个空数组。尝试将其设置为 null：

const [appStructure, setAppStructure] = useState(null);

根据您的系统将返回或可能返回的内容，您可以在 if 语句中添加更多检查，以确保在运行 map() 之前所有对象都存在：

if(appStructure && appStructure.structure && appStructure.structure.categories) 
  // Run map()