Javascript TypeError:无法读取属性'；追加儿童'；ReactJS中null的定义

我正在ReactJS中创建聊天应用程序，但遇到以下错误：

TypeError:无法读取null的属性“appendChild”

我已经调用了“printmessage”，但它仍然返回null。（第144行） 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: ' ',
      allkey: ' ',
      message: ' ',
      prevmessage: ' ',
      username: ' ',
      partnermessage: ' ',
      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 parsedallkey = parseInt(this.state.key,10) + parseInt(this.state.partner,10);
    var input = prompt("enter user code:")
    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) 
  }

  handle_message=(e)=>{
   this.setState({message: e.target.value});
   console.log(this.state.message)
  }

  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
    });
  }

  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" />
          <button className="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark" onClick={this.get_user}>
            Search
          </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="search" className="form-control align-self-center" placeholder=" Enter your message..." aria-label="Search" />
      <button className="btn btn-outline-primary" type="button" onClick={this.send_message} data-mdb-ripple-color="dark">
        Send
      </button>
    </form>
  </div>
</div>


     </div>
  </>);
  }

  identify_message=()=>{
    firebase.database().ref('MESSAGE'+this.state.allkey).limitToLast(1).on("child_added", (snapshot)=>{
      if(snapshot.val().sender + ": " + snapshot.val().message + ' , you said' === this.state.prevmessage || this.state.partnermessage === snapshot.val().sender + ": " + snapshot.val().message + ' , he said'){}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 + ' , you said'})
        document.getElementById("printmessages").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("printmessages").appendChild(li)
          console.log(snapshot.val().sender + ": " + snapshot.val().message + ' , he said')
          this.setState({partnermessage: snapshot.val().sender + ": " + snapshot.val().message + ' , he said'})
      }
    }
   });
  }


}

export default App;

从“React”导入React
导入“/App.css”；
从“firebase”导入firebase
常量firebaseConfig={
apiKey：“AIzaSyBTwRj0vzQn4v-IRVRQ7UQSPMNB0GI0A”，
authDomain:“whatapp-02.firebaseapp.com”，
数据库URL:“https://whatapp-02-default-rtdb.firebaseio.com",
项目：“WHATAP-02”，
storageBucket:“whatapp-02.appspot.com”，
messagingSenderId：“1085780260212”，
appId:“1:1085780260212:web:540d871a14bb7536b4e821”
};
firebase.initializeApp（firebaseConfig）
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
合作伙伴：''，
键：“”，
allkey:“”，
消息：“”，
前一条消息：“”，
用户名：“”，
partnermessage:“”，
聊天伙伴：“”，
};
}
登录=（）=>{
var key=Math.random（）.toString（）.substring（2,8）；
this.setState（{key:key，}）；
firebase.database（）.ref（'USER-'+key）.set({
钥匙：钥匙，
合作伙伴：''，
});
document.getElementsByClassName（“logindiv”）[0].style.display=“无”；
document.getElementsByClassName（“chatdiv”）[0].style.display=“block”；
setInterval（this.update_partner，1000）
}
获取用户=（）=>{
var parsedallkey=parseInt（this.state.key，10）+parseInt（this.state.partner，10）；
变量输入=提示（“输入用户代码：”）
firebase.database（）.ref（'USER-'+this.state.key）.set({
合作伙伴：输入，
});
firebase.database（）.ref（'USER-'+input）.set({
合作伙伴：this.state.key，
});
this.setState（{allkey:parsedallkey}）
}
更新合作伙伴=（）=>{
var parsedallkey=parseInt（this.state.key，10）+parseInt（this.state.partner，10）；
firebase.database（）.ref（'USER-'+this.state.key）.once（'value'，（快照）=>{
var partner=snapshot.val（）.partner
this.setState（{partner:partner}）
})
this.setState（{allkey:parsedallkey}）
setInterval（此.identify_消息，2000）
}
句柄_消息=（e）=>{
this.setState（{message:e.target.value}）；
console.log（this.state.message）
}
发送消息=（）=>{
firebase.database（）.ref（'MESSAGE'+this.state.allkey）.push（）.set（{//在firebase数据库中的引用“messages”中保存用户名和消息
发件人：this.state.key，
消息：this.state.message
});
}
render（）{
返回(
聊天应用
同侧前庭位于前庭，是一位杰出的献祭者。它是一位智者，是一位慈悲者。它是一个巨大的腔隙，它是一个不可分割的空间，它是一个不可分割的空间，它是一个不可分割的空间。它是一个前庭，它的前庭位于前庭，圣人之咒

维韦拉·乌兰科帕·阿库姆桑。每一个鼻锥，每一个接受者，每一个耳环，每一个耳环，每一个生命，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环，每一个耳环无柄柄柄。佩伦特式居住者morbi tristique Sentecus和netus及malesuada著名的埃古斯塔turpis egestas。Curabitur commodo posuere ligula id varius。morbi rutrum eu arcu位于amet viverra。门厅hendrerit sodales eros Egula。
{/*Navbar*/}
{/*容器包装器*/}
{/*导航栏品牌*/}
您的密钥：{this.state.key}
{/*切换按钮*/}
{/*可折叠包装器*/}
{/*搜索表单*/}
搜寻
{/*可折叠包装器*/}
{/*容器包装器*/}
{/*Navbar*/}

发送
);
}
识别信息=（）=>{
firebase.database（）.ref（'MESSAGE'+this.state.allkey）.limitToLast（1.on）（'child_added'，（snapshot）=>{
如果（snapshot.val（）{
if（snapshot.val（）.sender==this.state.key）{
var li=document.createElement（“li”）
li.innerHTML=snapshot.val（）.sender+“：“+snapshot.val（）.message+”，你说的是“；
console.log（snapshot.val（）.sender+”：“+snapshot.val（）.message+”，您说的是“）
console.log（this.state.allkey）
this.setState（{prevmessage:snapshot.val（）.sender+”：“+snapshot.val（）.message+”，您说的是“}”）
document.getElementById（“printmessages”）.appendChild（li）
}else if（snapshot.val（）.sender==this.state.partner）{
var li=document.createElement（“li”）
li.innerHTML=snapshot.val（）.sender+：“+snapshot.val（）.message+”，他说“；
document.getElementById（“printmessages”）.appendChild（li）
log（snapshot.val（）.sender+”：“+snapshot.val（）.message+”，他说“）
这个.setState（{partnermessage:snapshot.val（）.sender+”：“+snapshot.val（）.message+”，他说“}”）
}
}
});
}
}
导出默认应用程序；

---

我正在使用React CLI。我还在public/index.html中使用CDN集成了引导功能。

DOM搜索中存在问题。您正在查找id为

printmessage

但不存在的元素，而不是查找id为

printmessage

的列表元素。您只需更改

document.getElementById

即可查找如下所示的正确元素：

document.getElementById("printmessage").appendChild(li)

此外，正如在评论中所说的，这与React没有什么关系，因为您是呈现