React JS Firebase：調用 function 刷新數據時的奇怪行為

Question

在我的 React JS 消息應用程序中調用 function 時，我有一些奇怪的行為。 我刪除添加到數據庫中的最后一條消息，然后調用 function 以使用新數據重新查詢 db 和 setState（消息列表減去已刪除的消息）。

但是，它似乎只適用於重新加載頁面或輸入新消息，然后“已刪除”消息將消失並替換為新消息 - 但這應該通過該功能自動發生！

從 db 刪除數據后調用 refresh() - 這似乎是正確的。 此時firebase中的實時db顯示消息已被刪除。

然后在 refresh() function 我有一個控制台日志 - 它肯定被調用，但似乎在 console.log 中被調用了幾次。 此外，在刷新頁面之前，日志中列出的消息仍包含“已刪除”消息。

我已經移動了 setState function （請參閱我嘗試過的兩個位置），現在它確實刪除了消息，但是當我提交新消息時，舊消息和新消息都會顯示！

代碼：

import React, { Component } from 'react';
import firebase from 'firebase';
import { firebaseConfig } from './connection';

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let messageRef = firebase.database().ref('messages');
let listRef = firebase.database().ref('users');

class LandingPage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      name: '',
      message: '',
      list: [],
      names: [],
      font: "black",
    }

  }

  // LOAD PREVIOUS NAME AND MESSAGES ON PAGE LOAD 
  componentDidMount() {
    const previousMessages = this.state.list;

    messageRef.limitToLast(10).on('child_added', snapshot => {
      previousMessages.push({
        id: snapshot.key,
        message: snapshot.val().text,
        name: snapshot.val().name
      })

      this.setState({
        list: previousMessages
      })
    })
  }

  // PUSH MESSAGE TO DB THEN RESET THIS.STATE
  submitHandler = e => {
    e.preventDefault()
    let name = this.state.name;
    let text = this.state.message;
    function saveMessage(name, text) {
      let newMessageRef = messageRef.push();
      newMessageRef.set({
        name,
        text,
      })
    }
    saveMessage(name, text);

    this.setState({ message: '' });
  }

  // DELETE LAST USER COMMENT 
  onDelete = () => {
    let userName = this.state.name;
    // console.log(userName);
    messageRef.orderByChild('name').equalTo(userName).limitToLast(1).once('child_added', function (snapshot) {
      snapshot.ref.remove();
    })
    this.refresh();

    console.log('call refresh function');
  }
  // REFRESH MESSAGE LIST AFTER DELETING LAST MESSAGE
  refresh = () => {
    const previousMessages = [];
    messageRef.on('child_added', snapshot => {
      previousMessages.push({
        id: snapshot.key,
        message: snapshot.val().text,
        name: snapshot.val().name
      })
      // this.setState({
      //   list: previousMessages
      // })
      console.log(previousMessages);
    })
    this.setState({
      list: previousMessages
    })
  }

  // RENDER THE HTML
  render() {
    return <div className='container'>

      {/* messages will be listed here */}
      < div className='messagesDiv' id='messagesDivId' >
        <ul>
          {/* List array is mapped through*/}
          {this.state.list.map(item => {
            return (
              <li className={(item.name === this.state.name ? 'right' : 'left')}
                style={{ color: this.state.font }}
                key={item.id}
                id={item.id}>
                {item.name}: {item.message}
              </li>
            )
          })}
        </ul>
      </div >

      {/* message text area and send button here  */}
      < div className='inputDiv' id='inputDivId' >
        <form onSubmit={this.submitHandler}>
          <input name="message"
            className='inputBox'
            id='messageInputBox'
            placeholder="Send message..."
            value={this.state.message}
            onChange={this.changeHandler}
            required />
          <button className='submit' type="submit">Send Message</button>
        </form>
      </div >

      {/*think, delete options*/}
      < div id='options' >
        <button id='delete' className='button delete' onClick={this.onDelete}>Delete last message</button>
      </div >

    </div >
  }
}

export default LandingPage;

如果我注釋掉刷新 function，數據庫更新（）刪除最后一條消息）並且所有消息都按預期保留在屏幕上。 這讓我認為問題出在 refresh() function 本身，如果有幫助的話。

Answer 1

發現了問題。

它是 componentDidMount() 中的.limitToLast(10) componentDidMount()

這在某種程度上干擾了腳本中的refresh() 。 我意識到這不是一個值得的解釋。