Question

我正在关注react.js教程，并且在执行Tasks组件时一直遇到此错误“无法读取未定义的属性'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

这是一个常见问题，在您的情况下，是由于在道具拥有任何数据之前调用render引起的。最简单的解决方法是检查道具并仅在定义时渲染：

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

Answer 2

此错误'Cannot read property 'map''意味着您试图映射未定义的变量，在您的情况下为变量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，因此映射起作用。

在第二个示例中，未定义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');
}

Answer 3

简单的解决方案

1. 用 .map 函数注释该行，保存文件，然后重新加载页面

2. 取消注释该行并且不要重新加载浏览器。

<块引用>

注意：每次重新加载浏览器时都必须重复这些步骤。

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

3 个答案: