ReactJS在狀態內渲染項目數組

Question

我正在嘗試呈現項目列表，但出現此錯誤：

Objects are not valid as a React child (found: [object MessageEvent]). If you meant to render a collection of children, use an array instead.
    in li (at Chat.js:51)
    in ul (at Chat.js:47)
    in div (at Chat.js:70)
    in div (at Chat.js:63)
    in Chat (created by Context.Consumer)
    in Route (created by withRouter(Chat))
    in withRouter(Chat) (created by Context.Consumer)
    in Route (at App.js:14)
    in Switch (at App.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:11)
    in App (at src/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:11)

messages數組由連接的Websocket填充。 這是我所做的：

import React, { Component } from 'react';
import './Home.css';
import { withRouter } from 'react-router-dom';

class Chat extends Component {

    constructor() {
        super();

        this.state = {
            username: '',
            ws: '',
            message: '',
            messages: [],
        }

        this.handleMessageChanged = this.handleMessageChanged.bind(this);
        this.sendMessage = this.sendMessage.bind(this);
    }

    componentDidMount() {
        const self = this;
        this.setState({
            username: this.props.history.location.state.username,
            ws: new WebSocket(`ws://localhost:3001?username=${ this.props.history.location.state.username }`),
        }, () => {
            this.state.ws.addEventListener('message', (message) => {
                self.setState({ messages: [...self.state.messages, message] });
            });
        });
    }

    handleMessageChanged(event) {
        this.setState({ message: event.target.value });
    }

    sendMessage(event) {
        if (event.key === 'Enter') {
            this.state.ws.send(this.state.message);
            this.setState({ message: '' });
        }
    }

    renderMessages() {
        let messages = this.state.messages;
        return (
            <ul>
                {
                    messages.map((message, index) => {
                        return (
                            <li key={index}>
                                {message}
                            </li>
                        );
                    })
                }
            </ul>
        );
    }

    render() {
        return (
        <div className="Chat">
            <header className="App-body">
            <p>
                <code>ChatApp</code>
            </p>
            </header>

            <div className="container App-body">
                {this.renderMessages()}
                <input className="form-control form-control-lg message-box" value={this.state.message} onKeyDown={this.sendMessage} onChange={this.handleMessageChanged} type="text" placeholder="Enter your message here" />
            </div>

        </div>
        );
    }
}

export default withRouter(Chat);

您知道我為什么收到此錯誤嗎？

我也嘗試用以下方法調用他的renderMessages函數：

{this.renderMessages}

但是我得到了這個錯誤：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (at Chat.js:70)
    in div (at Chat.js:63)
    in Chat (created by Context.Consumer)
    in Route (created by withRouter(Chat))
    in withRouter(Chat) (created by Context.Consumer)
    in Route (at App.js:14)
    in Switch (at App.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:11)
    in App (at src/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:11)

Answer 1

這意味着renderMessages函數中的{message}是一個對象。 在該值上執行一些console.log 。 您可能需要從message選擇一個特定字段。

Answer 2

你不能渲染對象message中

<li key={index}>{message}</li>

要么替換為

<li key={index}>{JSON.stringify(message)}</li>

或使用消息內容呈現<div>

<li key={index}>
  <div>{message.prop}</div> <!-- I don't know what properties your object has -->
</li>