javascript - React---类型错误: Cannot read property 'map' of undefined

Question

我正在关注react.js 教程，但在执行任务组件时，我不断遇到此错误“无法读取未定义的属性‘map’”。什么会导致这个错误？ 任务组件

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;

任务组件

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;

非常感谢。

Answer 1

此错误“无法读取属性“map”” 意味着您尝试映射 undefined variable ，在您的情况下为变量tasks。示例:

// 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

在第一个示例中，您定义了变量tasks，因此 map 可以正常工作。

在第二个示例中，未定义tasks，因此当您尝试map时，会引发错误。

要解决这个问题，请在使用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');
}