删除视频元素不适用于Reactjs

如何解决删除视频元素不适用于Reactjs

我正在创建一个WebRTC应用，在该应用中，我需要在新用户连接时显示视频供稿，在新用户离开后将其删除。

import React,{ Component } from 'react';
import Peer from 'peerjs';


class Host extends Component {
    constructor(props) {
        super(props);
        this.peer = new Peer();
        this.state = { streams: [] };
    }

    async componentDidMount() {
        const self = this;

        this.peer.on('open',function(id) {
            self.peer.on('call',(call) => {
                console.log('Incoming call...');
                call.answer(stream);
                call.on('stream',(remoteStream) => {
                    let streams = [...self.state.streams,{src: remoteStream,connId: call.connectionId,display: true}];
                    self.setState({ streams });
                    console.log('Call received...');
                })

                call.on('iceStateChanged',(state) => {
                    if (state == 'disconnected') {
                        self.setState(prevstate => ({
                        streams: prevstate.streams.map(
                            s => s.connId === call.connectionId ? { ...s,display: false }: s
                        )}))
                        console.log('Call disconnected');
                    }
                })
            })
        }
    }
    
    render() {
        return(
            <>
            {this.state.streams.map((stream,idx) => {
                if (!stream.display)
                    return null

                return <video autoplay key={idx} ref={(ref) => {ref.srcObject = stream.src}}></video>
            })}
            <>
        );
    }
}

export default Host;

我能够动态创建视频元素，但是删除是我面临的问题。 每当iceStateChanged事件被调用时，即when user disconnects都会引发以下错误。

Uncaught TypeError: Cannot set property 'srcObject' of null