时间戳

首页 > 解决方案 > Reactjs this.props.map 不是函数

reactjs - Reactjs this.props.map 不是函数

问题描述

我正在尝试制作一个简单的消息应用程序，它接受用户名和一条消息，然后将消息传递下来并显示在另一个组件中。在应该显示消息的组件中，我收到一条错误消息this.props.messages.map is not a function。

这是我的代码沙箱：

https://codesandbox.io/s/unruffled-pasteur-nz32o

这是我的实际代码：

父组件：

import React, { Component } from "react";
import Messages from "./Messages";
import Input from "./Input";

export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: {
        user: [],
        message: []
      }
    };
  }

  updateMessage(message, sender) {
    this.setState({
      messages: [...this.state.messages, { user: sender, message: message }]
    });
  }

  render() {
    return (
      <div>
        <Messages messages={this.state.messages} />
        <Input
            updateMessage={(message, sender) =>
            this.updateMessage(message, sender)
          }
        />
      </div>
    );
  }
}

这里是应该显示消息的地方（也是我得到错误的地方）：

import React, { Component } from "react";

export default class Messages extends Component {
  render() {
    return this.props.messages.map(message => {
      return (
        <div>
          {message.user}: {message.maessage}
        </div>
     );
    });
  }
}

任何想法可能导致我的错误？谢谢！

标签： reactjs

解决方案

messages被初始化为状态中的对象。如果你想map覆盖它，它应该是一个数组。所以而不是这个：

  constructor(props) {
    super(props);
    this.state = {
      messages: {
        user: [],
        message: []
      }
    };
  }

你会想要这个：

  constructor(props) {
    super(props);

    this.state = {
      messages: [
        {
          user: [],
          message: []
        }
      ]
    };
  }

推荐阅读