useEffect 在其内部使用 setState 时会无限运行

Question

我正在开展群组视频聊天。我在使用 useEffect 时遇到问题。 让我解释一下这个问题。 这是我在 useEffect 中运行的代码。

useEffect(() => {
  const callOthers = async () => {
    if (callOthersTriggered) {
      const selfStream = await getMedia();
      setPeersOnConference((prev) => ({ ...prev, [peer.id]: selfStream }));
      for (const remotePeer in peersOnConference) {
        if (remotePeer === peer.id) continue;
        const call = peer.call(remotePeer, selfStream);
        call.on('stream', (remoteStream) => {
          setPeersOnConference((prev) => ({
            ...prev,
            [call.peer]: remoteStream,
          }));
        });
      }
    }
  };
  callOthers();
}, [callOthersTriggered, peer, peersOnConference]);

我只想在 callOthersTriggered 值为 true 时运行代码片段。另外，我正在迭代 peersOnConference 对象的键并同时设置键的值。为此，我需要将此对象添加到依赖项数组中，这实际上导致了无限循环。我应该做出哪些更改来解决此问题并实现功能？任何帮助或想法将不胜感激。

Answer 1

从依赖项列表中删除

peersOnConference

。因为当您在 useEffect 中执行 setPeersOnConference 时，它会导致 useEffect 一次又一次运行。 所以代码将变成

useEffect(() => {
  const callOthers = async () => {
    if (callOthersTriggered) {
      const selfStream = await getMedia();
      setPeersOnConference((prev) => ({ ...prev, [peer.id]: selfStream }));
      for (const remotePeer in peersOnConference) {
        if (remotePeer === peer.id) continue;
        const call = peer.call(remotePeer, selfStream);
        call.on('stream', (remoteStream) => {
          setPeersOnConference((prev) => ({
            ...prev,
            [call.peer]: remoteStream,
          }));
        });
      }
    }
  };
  callOthers();
}, [callOthersTriggered, peer]);