Javascript 如何在其他本地主机的convas上查看删除的映像？（node.js）

嗨，伙计们，我正在制作一个协作白板。基本上有从数据库加载的图片，您可以在画布上拖放。我想知道连接到服务器的其他客户端如何也能看到拖放图像

以下是server.js中的node.js设置：

io.on('connection', (socket)=> {
      console.log('User Online');

      socket.on('canvas-data', (data)=> {
            socket.broadcast.emit('canvas-data', data);
            
      })
})

这些是从component Container.jsx中的数据库加载的图像

<h4>Select picture!</h4>
                 
                                            {this.state.userData.map((data) => (
                                            
                                            <div class="dragImg">
                                                
                                                  
                                                 <img src={data.picture} class="img"/> 
                                               
                                                
                                              </div>
                                            ))}

<div className="Drop"  id="dropHere"><Board color={this.state.color} size={this.state.size}></Board></div>

socket = io.connect("http://localhost:5000");


   constructor(){
     super();
      this.state ={
          userData:[]
        }
        this.socket.on("canvas-data", function(data){
          const el = document.createElement('img');
          el.innerHTML = data;
          document.querySelector("#Drop").appendChild(el);
          
          
      })
    }
  

这就是它在Container.jsx中再次从服务器接收消息的地方

<h4>Select picture!</h4>
                 
                                            {this.state.userData.map((data) => (
                                            
                                            <div class="dragImg">
                                                
                                                  
                                                 <img src={data.picture} class="img"/> 
                                               
                                                
                                              </div>
                                            ))}

<div className="Drop"  id="dropHere"><Board color={this.state.color} size={this.state.size}></Board></div>

socket = io.connect("http://localhost:5000");


   constructor(){
     super();
      this.state ={
          userData:[]
        }
        this.socket.on("canvas-data", function(data){
          const el = document.createElement('img');
          el.innerHTML = data;
          document.querySelector("#Drop").appendChild(el);
          
          
      })
    }
  

它现在告诉我一个错误，appendChild的属性为null。有人能帮我正确实现我的功能吗？在互联网上很难找到这方面的信息