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

Question

I'm following the react.js tutorial, and I keep running into this error 'Cannot read property 'map' of undefined' when the Tasks component is executed. What would cause this error? Tasks component

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

class Tasks extends Component{
    render() {
        return this.props.tasks.map(task => <Task task={task} key={task.id} />); 
    }
}

export default Tasks;

Task component

import React, { Component } from 'react';

class Task extends Component {
    render(){
        const { task } = this.props;

        return <div>
           {task.title} - 
           {task.description} - 
           {task.done} - 
           {task.id}
            <input type="checkbox"/>
            <button>x</button>
        </div>
    }

}

export default Task;

Thank you very much.

Answer 1

This is a common issue, and in your case is caused by render being called before the prop has any data. The simplest fix is to check your prop and only render when it is defined:

class Tasks extends Component{
    render() {
        return Array.isArray(this.props.task) && this.props.tasks.map(task => <Task task={task} key={task.id} />); 
    }
}

Answer 2

This error 'Cannot read property 'map'' means that you trying to map a variable that is undefined, in your case, the variable tasks . Example:

 // OK let props = { tasks: ['a', 'b', 'c'] } props.tasks.map(task => console.log(task)); // a, b, c // Undefined let props2 = {}; props2.tasks.map(task => console.log(task)); // Throw an error

In the first example, you have defined the variable tasks , so the map works.

In the second example, tasks is not defined, so when you try to map , this throw an error.

To overcome this, verify if the variable exists, before use the map :

 let props = {}; // Using ternary operator props.tasks? props.tasks.map(task => console.log(task)): console.log('Ok'); // Ok // Using if if (props.tasks) { props.tasks.map(task => console.log(task)); } else { console.log('Ok'); }

Answer 3

Easy Solution

1. comment the line with the.map function, save the file, and reload the page

2. uncomment the line and do not reload the browser.

NOTE: You will have to repeat these procedures anytime you reload the browser.