Как правильно запушить объекты в массив объектов?

Question

[Johniq]

Есть данные(сообщения) которые приходят из бд(firebase), перебираю их форычем и пушу в массив this.state.messages, первое сообщение пишу в хроме, второе в сафари, вот наглядный пример того что получается, как сделать чтоб сообщение не копировалось?

код

import React from 'react';
import axios from 'axios';
import './App.css';
import io from 'socket.io-client';
import constants from '../../constants';
import firebase from 'firebase';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            socket: io('localhost:8000'),
            messages: [],
            userName: JSON.parse(localStorage.getItem('userName'))
        }
    }

    componentDidMount() {
        this.fetchMessages();
    }

    fetchMessages = () => {
        const ref = firebase.database().ref("messages");

        ref.on("value", snapshot => {
            snapshot.forEach(childSnapshot => {
                let data = childSnapshot.val();
                let messages = this.state.messages.slice();
                messages.push(data);

                this.setState({ messages });
            });
        }, error => {
            console.log(error);
        });
    };

    handleAddNickName = e => {
        e.preventDefault();
        const userName = this.refs.usernameRef.value;

        localStorage.setItem('userName', JSON.stringify(userName));
        this.setState({ userName });
    };

    handleNewMessage = e => {
        e.preventDefault();

        const message = {
            msg: this.refs.messageRef.value,
            userName: this.state.userName
        };

        this.state.socket.emit('NEW_MESSAGE', message);
        firebase.database().ref('messages').push(message);

        this.refs.messageRef.value = '';
    };

    render() {
        const { messages, userName } = this.state;
        const { handleNewMessage, handleAddNickName } = this;

        return (
            <div className="app">
                <header className="header">
                    <h1 className="logo">React Chat</h1>
                </header>

                { userName ?
                    <div className="chat-container">
                        <ul>
                            {
                                messages.length !== 0 ?
                                    messages.map((item, i) => {
                                        return <li key={ i }><strong>{ item.userName }</strong>: { item.msg }</li>
                                    })
                                    :
                                    <p>Loading...</p>

                            }
                        </ul>

                        <div className="chat-controllers">
                            <input type="text" ref="messageRef"/> <button onClick={ handleNewMessage }>Send</button>
                        </div>
                    </div>

                    :

                    <div className="nickname-container">
                        <input type="text" placeholder="Your nickname" ref="usernameRef" /> <button onClick={ handleAddNickName }>Go</button>
                    </div>
                }
            </div>
        )
    }
}

export default App;

Answer 1

[alvvi]

1. Не использовать индексы как ключи.
Если проблема сохраняется:
2. Открыть devtools, дебажить стейт компонента. Или выкладывайте в песочницу, чтобы могли задебажить другие.

Comments

[Johniq]

сомневаюсь что дело в ключах, причем тут вообще рендер? если вывожу в консоль, результат тот же

[alvvi]

Johniq, согласен, с ключами я просто пальцем в небо ткнул, хотя это тоже ошибка

Скорее всего у вас проблема в том, что сообщение добавляется и у самого юзера на фронтенде, + бродкастом приходит новое сообщение, которое тоже добавляется в стейт. В связки с firebase не работал и с сокетами опыта мало, поэтому как точно это решить не подскажу, но надеюсь хотя бы натолкнул вас на нужные гугл запросы.

Можно попробовать заменить
this.state.socket.emit('NEW_MESSAGE', message);
на

this.state.socket.broadcast.emit('NEW_MESSAGE', message);

но это опять пальцем в небо тыкаю