目前正在学习React，我正在制作一个视频通话网络应用程序。该网络应用程序的整个目的是简单地与另一个人一起进入会话并共享您的视频和音频。但是，我遇到了以下问题：

• • 类型错误：sendStream不是函数**

显然，函数sendStream不是一个函数，该函数被分配给一个按钮，它的工作方式应该是，每次我们点击"共享我的视频"时，也应共享也在同一会话中的其他人的视频和音频。
以下是：

• • 发送数据流**

const sendStream = async(stream) => {
        const tracks = stream.getTracks();
        for(const track of tracks){
            peer.addTrack(track,stream);
        }
    };

• • 在何处使用**

return(
        <div className='session-page-container'>
            <h1>Hi mom, Im on TV :D</h1>
            <h4>You are now online with {remoteUserID}</h4>
            <button onClick={(e) => sendStream(myStream)}>Share my video</button>
            <ReactPlayer url={myStream} playing muted/>
            <ReactPlayer url={remoteStream} playing/>
        </div>
    )

• • 整个组件**
• • 文件对等体. jsx（创建函数sendStream的位置）**

import React, { useMemo, useEffect, useState, useCallback } from "react";

const peerContext = React.createContext(null);

export const usePeer = () => React.createContext(null);

    export const PeerProvider = (props) => {
            const [remoteStream, setRemoteStream] = useState(null);
            const peer = useMemo(() => 
            new RTCPeerConnection({
                iceServers: [
                    {
                        urls: [
                            "stun:stun.l.google.com:19302",
                            "stun:global.stun.twilio.com:3478",
                        ],
                    },
                ],
            }),
        []
    );

    const createOffer = async() => {
        const offer = await peer.createOffer();
        await peer.setLocalDescription(offer);
        return offer;
    };      

    const createAnswer = async (offer) => {
        await peer.setRemoteDescription(offer);
        const answer = await peer.createAnswer();
        await peer.setLocalDescription(answer);
        return answer;
    };

    const setRemoteAns = async(ans) =>{
        await peer.setRemoteDescription(ans);
    };

    const sendStream = async(stream) => {
        const tracks = stream.getTracks();
        for(const track of tracks){
            peer.addTrack(track,stream);
        }
    };

    const handleTrackEvent = useCallback((ev) =>{
        const streams = ev.streams;
        setRemoteStream(streams[0]);
    }, []);

    useEffect(() => {
        if (!peer) return
        peer.addEventListener("track",handleTrackEvent); 
        return () =>{
           peer.removeEventListener("track",handleTrackEvent)
        }
    },[handleTrackEvent, peer]);

    return(
    <peerContext.Provider value={{ peer, createOffer, createAnswer, setRemoteAns, sendStream,remoteStream}}>{props.children}</peerContext.Provider>
    );
};

• • 将Session. jsx文件保存在使用它的位置**

import React, {useEffect, useCallback, useState} from 'react';
import  ReactPlayer from "react-player";
import { useSocket} from "../providers/Socket";
import { usePeer } from "../providers/Peer";

const SessionPage = () => {
    const { socket } = useSocket();
    const { peer, createOffer, createAnswer,setRemoteAns,sendStream,remoteStream } = usePeer();

    const [myStream,setMyStream] = useState(null);
    const [remoteUserID, setRemoteUserID] = useState();

    const handleNewUserJoined = useCallback(
        async(data) =>{
        const {userID} = data
        console.log("New user joined the session",userID);
        const offer =  await createOffer();
        socket.emit('call-user',{ userID, offer });
        setRemoteUserID(userID);
        },
        [createOffer,socket]
    );

    const handleIncomingCall = useCallback( async(data) => {
        const {from, offer} = data;
        console.log("Incoming Call from", from, offer);
        const ans = await createAnswer(offer);
        socket.emit("call-accepted",{userID: from, ans});
        setRemoteUserID(from);
    }, 
    [createAnswer, socket] );

    const handleCallAccepted = useCallback(async(data) => {
        const {ans} = data;
        console.log("Call Got Accepted",ans);
        await setRemoteAns(ans);

    }, [setRemoteAns]);

    const getUserMediaStream = useCallback(async() => {
        const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
        setMyStream(stream);
    }, []);

    const handleNegotiation = useCallback(() => {
        const localOffer = peer.localDescription;
        socket.emit("call-user",{userID: remoteUserID, offe: localOffer });
    }, []);

    useEffect(() => {
        socket.on("user-joined",handleNewUserJoined);
        socket.on("incomming-call",handleIncomingCall);
        socket.on("call-accepted",handleCallAccepted);

        //return () =>{
           // socket.off("user-joined",handleNewUserJoined);
            //socket.off("incomming-call", handleIncomingCall);
            //socket.off("call-accepted",handleCallAccepted);
       //};
    }, [handleCallAccepted,handleIncomingCall, handleNewUserJoined, socket]);

    /*useEffect(() => {
        peer.addEventListener("negationneeded",handleNegotiation);
        return () =>{
            peer.removeEventListener("negotionneeded",handleNegotiation);
        };
    },[]);*/

    useEffect(() => {
        getUserMediaStream();
    },[]);

    return(
        <div className='session-page-container'>
            <h1>Hi mom, Im on TV :D</h1>
            <h4>You are now online with {remoteUserID}</h4>
            <button onClick={(e) => sendStream(myStream)}>Share my video</button>
            <ReactPlayer url={myStream} playing muted/>
            <ReactPlayer url={remoteStream} playing/>
        </div>
    )
}

export default SessionPage

有没有人能帮我个忙，确保这件事按它应该的方式进行？