reactjs - 如何解决 TypeError：无法在反应中读取未定义问题的属性“地图”？

Question

您好，我是 reactjs 的初学者。我正在尝试将消息数组传递给名为 Message-List 的组件之一。我正在使用 this.props.messages.map() 这样做。但是我收到一条错误消息：TypeError：不能读取未定义的属性“地图”。

import React, { Component } from "react";
import ChatKit from "@pusher/chatkit";
import MessageList from "./component/Message-List";
import RoomList from "./component/Room-List";
import MessageSend from "./component/Message-Send";
import CreateRoom from "./component/Create-Room";
import TypeMessage from "./component/Type-Message";
import "./App.css";
import { tokenUrl, instanceLocator } from "./config";

class App extends Component {
constructor() {
super();
this.state = [
  {
    messages: []
  }
 ];
 }
 componentDidMount() {
 const chatManager = new ChatKit.ChatManager({
  instanceLocator,
  userId: "1",
  tokenProvider: new ChatKit.TokenProvider({
    url: tokenUrl
  })
  });

  chatManager.connect().then(currentUser => {
  currentUser.subscribeToRoom({
    roomId: 19379359,
    hooks: {
      onNewMessage: message => {
        console.log("message:text ", message.text);
        this.setState({
          messages: [...this.state.messages, message]
        });
      }
    }
    });
  });
   }

   render() {
    return (
    <div className="App">
    <RoomList />
    <MessageList messages={this.state.messages} />

    <CreateRoom />
    <TypeMessage />
    <MessageSend />
     </div>
     );
    }
   }

  export default App;

这是我的组件消息列表，我试图从 App.js 导入消息数组，但它抛出错误。

  import React from "react";


  class MessageList extends React.Component {


   render() {
   return (
   <div className="message-list">
    {this.props.message.map((messages, index) => {
      return (
        <div key={index} className="message">
          <div className="message-username">{messages.userId}</div>
          <div className="message-text">{messages.text}</div>
        </div>
      );
    })}
   </div>
    );
    }
    }

    export default MessageList;

标签： reactjs

Answer 1

你的初始状态是数组。你需要改变它的对象

this.state = [
  {
    messages: []
  }
 ];

将其更改为

this.state = {
    messages: []
  }