javascript - List gets longer depending on message input - React

Question

I have a chatApp that i am currently working on. It is mostly complete but it has one last bug where when you type a long message then the <li> elements duplicates even more. The longer the message, the more clones of the <li> element. APP.JS:

import React from 'react'
import './App.css';
import firebase from 'firebase'

const firebaseConfig = {
  apiKey: "AIzaSyBTwRj0vzQn4v-IRvRQ7UQSPMnBNT0Gi0A",
  authDomain: "whatapp-02.firebaseapp.com",
  databaseURL: "https://whatapp-02-default-rtdb.firebaseio.com",
  projectId: "whatapp-02",
  storageBucket: "whatapp-02.appspot.com",
  messagingSenderId: "1085780260212",
  appId: "1:1085780260212:web:540d871a14bb7536b4e821"
};

firebase.initializeApp(firebaseConfig)

class App extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
      name: ' ',
      partner: ' ',
      key: ' ',
      partnerkey: ' ',
      allkey: ' ',
      message: ' ',
      prevmessage: ' ',
      chatpartner: ' ',
    };
  }

  login=()=>{
    var key = Math.random().toString().substring(2, 8);
    this.setState({key: key,});
    firebase.database().ref('USER-'+key).set({
      key: key,
      partner: ' ',
    });
    document.getElementsByClassName("logindiv")[0].style.display = "none";
    document.getElementsByClassName("chatdiv")[0].style.display = "block";
    setInterval(this.update_partner, 1000)
  }

  get_user=()=>{
    var input = this.state.partnerkey;
    var parsedallkey = parseInt(this.state.key,10) + parseInt(this.state.partner,10);
    firebase.database().ref('USER-'+this.state.key).set({
     partner: input,
    });
    firebase.database().ref('USER-'+input).set({
      partner: this.state.key,
    });
    this.setState({allkey: parsedallkey})
  }
   
  update_partner=()=>{
  var parsedallkey = parseInt(this.state.key,10) + parseInt(this.state.partner,10);
  firebase.database().ref('USER-'+this.state.key).once('value', (snapshot)=>{
    var partner = snapshot.val().partner
    this.setState({partner: partner})
  })
  this.setState({allkey: parsedallkey})
  setInterval(this.identify_message, 2000) 
  }

  send_message=()=>{
    firebase.database().ref('MESSAGE'+this.state.allkey).push().set({ //Save user name and message in reference "messages" in firebase database
        sender: this.state.key,
        message: this.state.message
    });
  }

  identify_message=()=>{
    firebase.database().ref('MESSAGE'+this.state.allkey).limitToLast(1).on("child_added", (snapshot)=>{
      if(snapshot.val().sender + ": " + snapshot.val().message === this.state.prevmessage){}else{
      if(snapshot.val().sender === this.state.key){
        var li = document.createElement("li")
        li.innerHTML = snapshot.val().sender + ": " + snapshot.val().message + ' , you said'; 
        console.log(snapshot.val().sender + ": " + snapshot.val().message + ' , you said')
        console.log(this.state.allkey)
        this.setState({prevmessage: snapshot.val().sender + ": " + snapshot.val().message})
        document.getElementById("printmessage").appendChild(li)
      }else if(snapshot.val().sender === this.state.partner){
          var li = document.createElement("li")
          li.innerHTML = snapshot.val().sender + ": " + snapshot.val().message + ' , he said';
          document.getElementById("printmessage").appendChild(li)
          console.log(snapshot.val().sender + ": " + snapshot.val().message + ' , he said')
          this.setState({prevmessage: snapshot.val().sender + ": " + snapshot.val().message})
      }
    }
   });
  }

  render(){
    return (<>
     <div className='logindiv'>
     <h1 style={{float: 'left'}}>chatApp</h1>
       <a href="#" role="button" onClick={this.login} style={{position:'relative',top:29,float: 'right'}}>Guest login</a>
     <div style={{position: 'relative', top:90,height:440, textAlign: 'center', backgroundImage: "url(https://cdn.wallpapersafari.com/20/74/x58BEZ.jpg)"}}>
       <h2 style={{position: 'relative',top:50,color: 'white'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dapibus sapien, quis sagittis quam. Pellentesque lacus mi, bibendum ac augue non, placerat tempus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi laoreet tellus consequat pulvinar pulvinar. Cras neque ante, varius vel feugiat nec, cursus nec sapien. Sed <br></br>viverra ullamcorper accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vitae pellentesque lectus. Vivamus eget urna at tellus porta sodales at quis urna. <br></br>Aliquam non enim non ipsum viverra gravida a convallis metus. Aenean dapibus accumsan nunc, non vestibulum nulla semper ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur commodo posuere ligula id varius. Morbi rutrum eu arcu sit amet viverra. Vestibulum hendrerit sodales eros eget imperdiet.</h2>
     </div>
     </div>

     <div className='chatdiv'>
<div>
  {/* Navbar */}
  <nav className="navbar navbar-expand-lg navbar-light bg-light">
    {/* Container wrapper */}
    <div className="container-fluid">
      {/* Navbar brand */}
      <h4 className="navbar-brand" >Your key: {this.state.key}</h4>
      {/* Toggle button */}
      {/* Collapsible wrapper */}
      <div className id>
        {/* Search form */}
        <form className="d-flex input-group w-auto ml-auto">
          <input type="search" className="form-control align-self-center" placeholder=" Enter a user code..." aria-label="Search" onChange={(e)=>{this.setState({partnerkey: e.target.value})}}/>
          <button className="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark" onClick={this.get_user}>
            Search ({this.state.partnerkey})
          </button>
        </form>
      </div>
      {/* Collapsible wrapper */}
    </div>
    {/* Container wrapper */}
  </nav>
  {/* Navbar */}
  <div className="copntainer-fluid">
    <div className>
      <div className="form-group">
        <label htmlFor="exampleFormControlTextarea3" />
        <ul id="printmessage"></ul>
      </div>
    </div>
    <form className="d-flex input-group w-auto ml-auto">
      <input type="text" className="form-control align-self-center" placeholder=" Enter your message..." aria-label="Search" onChange={(e)=>{this.setState({message: e.target.value})}} />
      <button className="btn btn-outline-primary" type="button" onClick={this.send_message} data-mdb-ripple-color="dark">
        Send
      </button>
    </form>
  </div>
</div>


     </div>
  </>);
  }
}

export default App;

PUBLIC/INDEX.HTML: (it only has CDN links)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

PACKAGE.JSON: (the problem is not here, i believe)

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "firebase": "^8.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I will be very grateful for your help.

Answer 1

等待大神答复