反应 JS。类型错误：无法读取未定义的属性“地图”答案

【问题标题】：React JS. Type Error: Cannot read property 'map' of undefined反应 JS。类型错误：无法读取未定义的属性“地图”
【发布时间】：2017-07-10 15:35:32
【问题描述】：

我确实遇到了以下问题。在 {this.props.items.map((item, index) => 部分我遇到了一种错误：Cannot read property 'map' of undefined On Reacts and I don't know what发生了什么？我是编程新手，请按照 React JS 中的教程进行操作。

** 我的代码：App.js**

        import React, { Component } from 'react';
        class Header extends Component {
          render() {
            console.log('items', this.props.items);
            return (
              <div>
                {this.props.items.map((item, index) =>
                  <a href={item.link} key={index}>{item.label}</a>
                )}
              </div>
            );
          }
        }
        export default Header;

我的代码 Header.js

从'react'导入反应，{组件}；

const menu = [
  {
    link: '/articles',
    label: 'Articles'
  },
  {
    link: '/contacts',
    label: 'Contacts'
  },
  {
    link: '/posts',
    label: 'Posts'
  }
];
class Header extends Component {
  render() {
    return (
      <div>
      <Header items={menu}/>
      </div>
    );
  }
}
export default Header;

【问题讨论】：

显示items 对象以及如何获取它。

标签： reactjs

【解决方案1】：

我认为您只需要在 React 组件中添加一个构造函数。这将告知 React 超类型你的 props 的值是什么。 React 会通过 this.props.items

将这些 props 作为实例变量提供给你的 render() 方法

import React, { Component } from 'react';

class Header extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    console.log('items', this.props.i...
     ...

}
export default Header;

【讨论】：

【解决方案2】：

this.props.items 为空。为避免该错误，您可以使用 if...else 语句。

        {this.props.items ? this.props.items.map((item, index) =>
          <a href={item.link} key={index}>{item.label}</a>
        ) : null}

【讨论】：

【解决方案3】：

为什么在您的 App.js 文件中使用名称 Header？有点混乱……

产生错误是因为prop items是空的……为什么？？？还不知道。

我用您的代码在 jsfiddle 中创建了一个示例...更改名称 :)

class App extends React.Component {
  render() {
    return (
      <div>
        <Header items={menu}/>
      </div>
    );
  }
}

https://jsfiddle.net/ru5fd59n/1/

【讨论】：

【解决方案4】：

我假设项目来自 API 端点，这意味着当第一次调用 render() 函数时 this.props.items 将是未定义的。

要使其正常工作，您必须：

验证 this.props.items !== undefined 是否然后进行映射
使用默认道具

Header.prototype.defaultProps = {items: []};

import React, { Component } from 'react';
class Header extends Component {
  render() {
    console.log('items', this.props.items);
    return (
      <div>
        {this.props.items && this.props.items.map((item, index) =>
          <a href={item.link} key={index}>{item.label}</a>
        )}
      </div>
    );
  }
}

Header.prototype.defaultProps = {
  items: []
}

export default Header;

【讨论】：

JSFiddle 配置错误，请 fork 原版 React JSFiddle
我猜你想评论一个不同的答案。
但是你的不行。我不确定是什么问题，在哪里？
抱歉，我忘记在 Header.prototype 中添加 defaultProps。我刚刚用示例代码更新了答案。

【解决方案5】：

鉴于您没有在第二个代码中导入第一段代码，我想说您正在使用第一段代码作为您的入口点，因为您遇到了错误并且从未接触过第二段代码。由于您永远不会到达定义和传递菜单的代码，因此 this.props.items 是未定义的。

您需要翻转组件的名称，即 Header.js 和 App.js。那你应该

import Header from './Header'

为了清楚起见，您应该将第二段代码重命名为 App 并将其导出。它应该是这样的。

Header.js

import React, { Component } from 'react';
class Header extends Component {
  render() {
    console.log('items', this.props.items);
    return (
      <div>
        {this.props.items.map((item, index) =>
          <a href={item.link} key={index}>{item.label}</a>
        )}
      </div>
    );
  }
}
export default Header;

App.js

import React, { Component } from 'react';
import Header from './Header'

const menu = [
  {
    link: '/articles',
    label: 'Articles'
  },
  {
    link: '/contacts',
    label: 'Contacts'
  },
  {
    link: '/posts',
    label: 'Posts'
  }
];
class App extends Component {
  render() {
    return (
      <div>
      <Header items={menu}/>
      </div>
    );
  }
}
export default App;

如果您是直接执行应用程序，则无需导出它。

【讨论】：