Question

我确实遇到了以下问题。在 {this.props.items.map（（item，index）=＆gt; 的部分中，我遇到了一种错误：无法读取undefined On Reacts的属性'map'，我不知道发生了什么？我是编程新手，并按照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'导入React，{Component};

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;

Answer 1

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

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

Answer 2

我假设项目来自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;

Answer 3

为什么在App.js文件中使用名称Header？这有点令人困惑......

产生错误是因为道具物品是空的......为什么???不知道。

我在jsfiddle中使用您的代码创建一个示例...更改名称：）

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

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

Answer 4

看到你没有在第二段代码中导入第一段代码，我会说你使用第一段代码作为入口点，因为你得到错误而不是永远触及第二件。由于您永远无法访问定义和传递菜单的代码，因此未定义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;

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

Answer 5

我认为您只需要在React组件中使用构造函数。这将通知React超类型道具的价值。然后，React将这些道具作为实例变量提供，以便通过 this.props.items

在 render（）方法中使用

import React, { Component } from 'react';

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

}
export default Header;

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

5 个答案: