时间戳

首页 > 解决方案 > 地图功能无法在 reactJS 应用程序中实现

reactjs - 地图功能无法在 reactJS 应用程序中实现

问题描述

我是新来的反应，并从教程创建了一个简单的应用程序。在教程中，他们使用了无状态组件，而我改为使用有状态组件。但我收到了这个错误

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

我不知道我的代码哪里出错了。对我来说似乎没问题。

消息列表.js

import React, { Component } from 'react';
import MessageView from './message-view';

class MessageList extends Component {
  state = {
    messages: [
      {
        from: 'John',
        message: 'The event will start next week',
        status: 'unread'
      },
      {
        from: 'Martha',
        message: 'I will be traveling soon',
        status: 'read'
      },
      {
        from: 'Jacob',
        message: 'Talk later. Have a great day!',
        status: 'read'
      }
    ]
  };

  render() {
    const { messageViews } = this.state.messages;
    console.log(messageViews);
    return (
      <div>
        <h1>List of Messages</h1>
        {messageViews.map(msgList => (
          <MessageView message={msgList.messages} />
        ))}
      </div>
    );
  }
}
export default MessageList;

消息视图.js

import React, { Component } from 'react';

class MessageView extends Component {
  render() {
    const list = this.props.message;
    console.log(list);

    return (
      <div className="container">
        <div className="from">
          <span className="label">From : </span>
          <span className="value">{list.name} </span>
        </div>

        <div className="status">
          <span className="label">Status : </span>
          <span className="value">{list.status}</span>
        </div>

        <div className="message">
          <span className="label">Message : </span>
          <span className="value">{list.content} </span>
        </div>
      </div>
    );
  }
}

export default MessageView;

我试过搜索为什么地图功能不起作用但没有用。我对反应很陌生。有人可以指导我吗？

标签： reactjs

解决方案

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

messageViews为了解决这个错误，你应该像这样删除大括号

 render() {
    const messageViews = this.state.messages;  //removed the curly brackets
    return (
      <div>
        <h1>List of Messages</h1>
        {messageViews.map(msgList => (
          <MessageView message={msgList.messages} />
        ))}
      </div>
    );
  }

因为当你这样写时：

const { messageViews } = this.state.messages

它将尝试解构this.state.messages对象，正如我们所见，它们不messageViews存在任何属性。因此，messageViews是未定义的。

然后，当您使用map()类似的方法时messageViews.map(msgList => (...))，程序将尝试调用未定义变量的map()方法。这就是您收到错误消息的原因：无法读取未定义的属性“地图”

推荐阅读