Ref не передается на втором рендеринге JSX ⇐ Javascript

[Anonymous]

У меня есть компонент React для моего приложения для видео вызовов: < /p>
"use client";

import { useEffect, useRef, useState } from "react";
import { socket } from "@/lib/socket";
import * as mediasoupClient from "mediasoup-client";
import { useSearchParams } from "next/navigation";
import createProducerTransport from "./functions/createProducerTransport.js";
import createProducer from "./functions/createProducer.js";
import requestTransportToConsume from "./functions/requestTransportToConsume.js";

export default function Call({ name }) {
const searchParams = useSearchParams();
const roomName = searchParams.get("id");
const localVideo = useRef();
const localStream = useRef({});
const runOnce = useRef(false);
const joinRoomResp = useRef({});
const device = useRef();
const producerTransport = useRef(null);
const videoProducer = useRef(null);
const audioProducer = useRef(null);
const [isAudioMuted, setIsAudioMuted] = useState(false);
const [consumers, setConsumers] = useState({});
const consumersRef = useRef({});

const setValue = (arg) => {
consumersRef.current = arg;
setConsumers(arg);
console.log("consumersRef", consumersRef.current);
};
useEffect(() => {
consumersRef.current = consumers;
console.log("consumersRef", consumersRef.current);
}, [consumers]);

useEffect(() => {
if (runOnce.current) return;

connect();

socket.on("newProducersToConsume", (consumeData) => {
// This Listener should only receive Consume data but not set up a connection
console.log("newProducersToConsume");
console.log(consumeData);
requestTransportToConsume(
consumeData,
socket,
device.current,
setConsumers
);
});

socket.on("userDisconnected", (pid) => {
if (consumersRef.current[pid]?.consumerTransport) {
consumersRef.current[pid].consumerTransport.close();
console.log("consumerTransport closed");
}
const newState = { ...consumersRef.current };
delete newState[pid];
console.log("new state", newState);
setValue(newState);
});
console.log("audioproducer", audioProducer.current);
runOnce.current = true;
}, []);

const connect = async () => {
const resp = await socket.emitWithAck("connected");
if (resp) {
console.log("socket connected");
try {
const joinRoomResp = await joinRoom();
if (joinRoomResp === "roomFull") {
alert("Room is full");
throw new Error("Room is full");
} else if (joinRoomResp === "error") {
throw new Error("Error joining room");
}
if (device.current) {
await gum();
await sendFeed();
}
} catch (error) {
console.error("Error joining room:", error.message);
}
} else {
console.log("socket not connected");
}
};

const gum = async () => {
localStream.current = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});
localVideo.current.srcObject = localStream.current;

// localVideo.current.muted = true;
};
const joinRoom = async () => {
try {
const res = await socket.emitWithAck("joinRoom", {
userName: name,
roomName,
});
if (res === "roomFull") {
alert("Room is full");
throw new Error("Room is full");
}
if (res === "error") {
throw new Error("Error joining room");
}
device.current = new mediasoupClient.Device();
await device.current.load({
routerRtpCapabilities: res.routerRtpCapabilities,
});
console.log("joinRoomResp", res);
// console.log("device", device.current);
requestTransportToConsume(res, socket, device.current, setConsumers);

return res;
} catch (error) {
console.error("Error joining room:", error.message);
}
};
const sendFeed = async () => {
producerTransport.current = await createProducerTransport(
socket,
device.current
);
console.log("Have the producer transport, now we need to produce");
const producers = await createProducer(
localStream.current,
producerTransport.current
);
videoProducer.current = producers.videoProducer;
audioProducer.current = producers.audioProducer;
console.log("Producers are created!");
};
const muteAudio = () => {
if (audioProducer.current.paused) {
audioProducer.current.resume();
socket.emit("audioChange", "unmute");
setIsAudioMuted(false);
} else {
audioProducer.current.pause();
socket.emit("audioChange", "mute");
setIsAudioMuted(true);
}
};
if (Object.keys(consumers).length === 0) {
return (


Waiting for other participant...



);
}
return (

{roomName && Room ID: {roomName}}
{isAudioMuted ? "Unmute" : "Mute"}



{Object.keys(consumers).length > 0 &&
Object.keys(consumers).map((key) => {
return (


{consumers[key].userName}


{
if (video) {
video.srcObject = consumers[key].combinedStream;
}
}}
/>

);
})}

);
}

< /code>
Функция резинки вызывается, но когда JSX визуализируется, источник видео не обновляется, и у меня просто остался пустой черный ящик.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... der-of-jsx