仅基于功能组件工作一个反应项目。
项目包含使用 JSSIP 的音频呼叫功能。调用函数可以在单个调用中正常工作。
当发生多个呼叫时，我可以在应用程序底部显示多个呼叫弹出窗口，如下图所示
调用 NewRTCSession 时组件会多次加载，因此我使用useRef来存储所有会话。
直到现在一切正常。
现在，当我从浏览器endCall()方法和terminate()会话中按End Call时。
现在，当呼叫结束时，JSSIP 会话呼叫失败事件呼叫。
现在添加代码。
const messageHandler = (message, participants, setParticipants) => {
setParticipants({
...participants,
[message.request.call_id]: message
});
const session = message.session;
session.on('failed', (e) => {
try {
delete participants[message.request.call_id];
setParticipants(participants);
} catch(ex) {
}
});
};
function IncomingCall() {
const [participants, setParticipants] = React.useState({});
const participantsRef = React.useRef(participants);
React.useEffect(() => {
participantsRef.current = participants;
});
React.useEffect(() => {
const handler = (message) => {messageHandler(message, participantsRef.current, setParticipants)};
const phone = JsSipHelper.ua();
phone.on("newRTCSession", handler);
}, []);
const endCall = (id) => {
participants[id].session.terminate();
};
return (
<div id="meetingRoom">
{Object.keys(participants).map((participant, index) => (
<div>
<h1>Call From: {participants[participant].session.remote_identity.display_name}</h1>
<button onClick={() => endCall()}>End Call</button>
<button>Answer Call</button>
</div>
))}
</div>
);
}
export default IncomingCall;
当endCall()从第一个通话部分调用时，手机中的通话成功结束。现在事件调用失败，我正在尝试更新参与者的状态变量，但该变量完全清除。
但是现在我正在等待超时后手机中的呼叫结束，所以它发生了，并且弹出窗口再次出现在 ui 中。
所以，我在这里很困惑。state和useRef如何与多个一起工作。
参考