Question

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

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

我不知道我的代码在哪里出错。对我来说似乎没事。

message-list.js

python3 -m rasa_nlu.train \
    --config YOUR_CONFIG_FILE.yml \
    --data YOUR_TRAIN_DATA.json \
    --path PATH_TO_SAVE_MODEL

message-view.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;

我尝试搜索为什么地图功能不起作用但无济于事。我是新来的人。有人可以指导我吗？

Answer 1

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

为解决此错误，您应像这样删除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 => (...))方法时，程序将尝试调用 undefined 变量的map()方法。这就是为什么出现错误的原因：无法读取未定义的属性“ map”

Answer 2

您的代码中有一些基本问题

首先：状态消息不包含称为messageViews的键，因此会出现错误

第二：：在消息视图“组件”中，您没有访问正确的密钥，即。 from, message代替name, content

工作代码

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 { messages: messageViews } = this.state;
    console.log(messageViews);
    return (
      <div>
        <h1>List of Messages</h1>
        {messageViews.map(msgList => <MessageView message={msgList} />)}
      </div>
    );
  }
}
export default MessageList;

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.from} </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.message} </span>
        </div>
      </div>
    );
  }
}

CodeSandbox Demo

无法在reactJS应用中实现地图功能

2 个答案: