无法读取 react.js 上未定义的属性 'map'

Question

你好我是react的初学者，我卡住了Cannot read the 属性 'map' of undefined，我理解是类型错误请帮助我。

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


class MessageList extends Component {
    render() {
        const   { messages } = this.props;
        return messages.map(message => (
            <ul>
                <Message message={message} />
            </ul>
        ));
    }   
}

export default MessageList;

Answer 1

建议的消息可以为空，在这种情况下地图会抛出错误。但是，您还没有构建 props，这意味着消息将始终为 null。

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


class MessageList extends Component {
constructor(props) {
   super(props);
   // state if you need it.
   this.state = { counter: 0 };
 }
    render() {
        const   { messages } = this.props;
        return messages && messages.map(message => (
            <ul>
                <Message message={message} />
            </ul>
        ));
    }   
}

export default MessageList;

已测试，有效。

Answer 2

你可以尝试使用“空对象”模式来避免当 prop 没有被发送到组件时出现这样的错误，问题不是出在你给我们看的代码上，所以我们帮不了你找到主要问题

渲染方法内部的空对象模式（在本例中也是默认参数）：

const   { messages = [] } = this.props;

无法读取 react.js 上未定义的属性 'map'

Cannot read property 'map' of undefined on react.js

undefined

reactjs

react-native

无法读取 react.js 上未定义的 属性 'map'

Cannot read property 'map' of undefined on react.js

undefined

reactjs

react-native

无法读取 react.js 上未定义的属性 'map'