Только последние данные извлекаются из firesbase после обновления страницы с помощью firebase .on ()

Question

У меня странная проблема с firebase. Realtime DB.problem с компонентом чата.

 componentDidMount(){
  this.renderMessages();
 }

renderMessages(){
rdb.ref("chats/"+this.props.id).orderByChild("time").on('child_added',   (snapshot)=>{
             if(snapshot.exists)
            {
                this.setState({messages [...this.state.messages,snapshot.val()]})
            }

    })
}

, затем сопоставьте это состояние и передайте данные другим компонентам, и все отлично работает на первый запуск.

утешенный объект При первом запуске [это массив объектов]

   0: Object { message: "hello", read: false, sender: "Shan", … 
   1: Object { message: "Hai Shan", read: false, sender: "AashiqOtp", … }
   2: Object { message: "hi", read: false, sender: "AashiqOtp", … }  

, когда я go возвращается и повторно вошел в компонент, то он показывает только последний объект массива ie

0: Object { message: "hi", read: false, sender: "AashiqOtp", … }

в чем проблема? Кто-нибудь может мне помочь? Заранее спасибо.

ОБНОВЛЕНО

Я использую прослушиватель событий ".once", проблем нет, но так как это компонент чата, мне нужно всегда слушать событие.

Answer 1

Это проблема, связанная с недостаточно быстрым обновлением состояния. Вам следует использовать функцию обновления, если ваше новое состояние основано на старом.

Кроме того, вы не должны вызывать this.setState несколько раз в forEach и вместо этого добавлять весь массив сразу, чтобы избежать многих ненужных повторных обработок и подобных проблем

renderMessages(){
    rdb.ref("chats/"+this.props.id).on('value', (snapshot) => {
        this.setState(prevState => ({
            messages: [
                ...prevState.messages, 
                ...snapshot
                    .filter((childsnap) => childsnap.exists)
                    .map((childsnap) => childsnap.val())
            ]
        }))
    })
}

Поскольку вы изменили событие в вопросе, невозможно добавить сразу весь массив, и вам придется использовать менее эффективный метод:

renderMessages(){
    rdb.ref("chats/"+this.props.id).orderByChild("time").on('child_added', (snapshot) => {
        if (snapshot.exists) {
            this.setState(prevState => ({
                messages: [
                    ...prevState.messages, 
                    snapshot.val()
                ]
            }))
        }
    })
}