React JS Firebase：调用 function 刷新数据时的奇怪行为

Question

I have some strange behavior when calling a function in my React JS message app. I delete the last message added to the database then call a function to re-query the db and setState with the new data (message list minus the deleted message).

However, it only seems to work on reloading of the page, or typing a new message, then the 'deleted' message would disappear and be replaced with the new one - but this should happen automatically via the function!

The refresh() is called after deleting the data from db - this seems correct. At this point, the real-time db in firebase shows the message has been deleted.

Then in the refresh() function I have a console log - it is definately being called, but appears to be called several times in the console.log. Also, the messages listed in the log still contain the 'deleted' message until page is refreshed.

I have moved the setState function (see belox the two positions I have tried) and now it does delete the message, yet when I submit a new message, both the old and new message are shown!

Code:

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;

If I comment-out the refresh function, the db updates ()deletes last message) and the all messages stay on the screen, as expected. This makes me think that the problem is within the refresh() function itself, if that helps.

Answer 1

Found the problem.

It is the .limitToLast(10) in componentDidMount()

This interfered somehow with refresh() further down in the script. I realise this isn't a worthy explanation.