Я пытаюсь отобразить список элементов, но я получил эту ошибку:

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 заполняется подключенным веб-сокетом. Вот что я сделал:

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)
0
JoKeRxbLaCk 18 Апр 2019 в 18:28

2 ответа

Лучший ответ

Это означает, что {message} в вашей функции renderMessages является объектом. Сделайте несколько console.log с этим значением. Вы можете выбрать конкретное поле из message.

2
Strebler 18 Апр 2019 в 15:33

Вы не можете отобразить объект 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>
2
Karel Frajták 18 Апр 2019 в 15:36