问题：TypeError：无法读取未定义的属性“地图”

Question

我正在阅读一些教程，但遇到了错误“无法读取未定义的属性 'map'”的问题。请帮助我使用以下代码。

TypeError：无法读取未定义的属性“地图” TodoItems.render C:/Users/hp/Desktop/todo_list/src/TodoItems.js:10

 7 | 
   8 |    render(){
   9 |        var todoEntries = this.props.entries;
> 10 |        var listItems = todoEntries.map(this.createTasks);
     | ^  11 | 
  12 |        return (
  13 |            <ul className="theList">
View compiled
▶ 23 stack frames were collapsed.

import React, { Component } from "react";

class TodoItems extends Component{
    createTasks(item) {
        return <li key={item.key}>{item.text}</li>
    }

    render(){
        var todoEntries = this.props.entries;
        var listItems = todoEntries.map(this.createTasks);

        return (
            <ul className="theList">
                {listItems}
            </ul>
        );
    }
}

export default TodoItems;


and the TodoList file code is:
render() {
        return (
            <div className="todoListMain">
            <div className="header">
                <form onSubmit={this.addItem}>
                    <input ref={(a) => this._inputElement = a}
                         placeholder="enter task">
                    </input>
                    <button type="submit">add</button>
                </form>
            </div>
            <TodoItems entries={this.state.items}/>
        </div>
        );
    }
}

export default TodoList;

Answer 1

您试图将this.state.items 传递为entries，但它似乎不是数组而是undefined。

您可以通过执行以下操作将其设为默认数组 -

class MyComponent extends Component {
  state = {
    items: []
  }
}