如何：修复ReactJS类型错误-无法读取未定义的属性'map'

问题描述

使用material-ui标头组件，我遇到了这个错误：

我应该怎样看才能进行调试？再次专注于Web开发，并竭尽所能。

TypeError: Cannot read property 'map' of undefined


src/Components/Header.js:53


  50 |     Sign up
  51 |   </Button>
  52 | </Toolbar>
> 53 | <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
     | ^  54 |   {sections.map((section) => (
  55 |     <Link
  56 |       color="inherit"

解决方法

要调试此错误，请查看错误：Cannot read property 'map' of undefined
JavaScript告诉您某个地方（堆栈跟踪通常告诉您在哪一行），您试图读取map对象的属性undefined
看看这个片段，它会抛出相同的错误：

let sections; // sections= undefined
sections.map();
// Uncaught TypeError: Cannot read property 'map' of undefined

map()是来自Array.prototype的函数，这意味着您需要在数组上调用它：

const sections = [1,2,3];
sections.map(...);
// works,because sections is an array.

要更详细地说明您的代码，sections变量是未定义的，而不是您可能期望的数组。
您可以做的事情之一：

使用Conditional Rendering模式：

sections && sections.map(...)
将节初始化为空数组。

两者都可能起作用。确定哪种是最适合您的解决方案。

或者您可以使用可选的javascript链接 link

sections?.map

即使节未定义，也不会引发错误。

这是因为在渲染时sections是未定义的（可能是由于异步行为）。您可以使用三元运算符-

来解决此问题

condition ? truthy expression : falsy expression

{ sections.length ? sections.map((section) => <Link color="inherit" ...
   : <p class="errorMsg"> No sections can be displayed. </p>

javascript reactjs reactjs