你好，我正在使用Web Socket和WebRTC实现一个Web会议室。我将用户存储在connectionList中。每当用户连接时，就会将用户添加到列表中。仅存储远程用户。因此，当新用户加入会议时，应当创建另一视频和音频元素。
例如，如果会议室有3个用户，则列表中将存储2个远程用户。这意味着视频和音频元素应该创建2x。列表有2个元素，但只会创建一个视频和一个音频元素。只有当我保存应用程序并引起另一个渲染时，所有元素才会出现。这是代码的重要部分。

{connectionList.map((stream, index) => (

            <React.Fragment key = {stream.id}>
              <div>{console.log("div index:", index)}</div>
              <video ref={el => {
                console.log("index in ref", index);
                console.log("connectionList", connectionList);
                if (index >= remoteVideoStreamList.current.length) {
                  remoteVideoStreamList.current.push({
                    stream: el,
                    fromUserID: connectionList[index].fromUserID
                  });
                }
              }} autoPlay style={{
                height: `${250}px`,
                width: `${250}px`,
                border: `solid ${1}px black`
              }} ></video>
              <audio ref={el => {
                if (index >= remoteAudioStreamList.current.length) {
                  remoteAudioStreamList.current.push({
                    stream: el,
                    fromUserID: connectionList[index].fromUserID
                  });
                }
              }} autoPlay ></audio>
            </React.Fragment>
          ))}

我有控制台日志来查看索引的进展情况以及列表中有多少元素。同样地，我有一个div来再次检查索引走了多远。我有以下输出

App.jsx:325 div index: 0
App.jsx:327 index in ref 0
App.jsx:328 connectionList Array(2)

稍后再次渲染时

App.jsx:325 div index: 0
App.jsx:325 div index: 1

即使列表具有2个元素，也跳过视频元素。只有当我保存时，所有元素才被创建。我希望有人能帮助我
我已经在网上搜索了为什么元素没有被绘制出来。也许是钥匙，但我没有收到错误消息。当我保存的时候，所有的元素都出现了，所以它不可能是键。与

useEffect(()=>{
   console.log("changed");
   console.log(connectionList)
 },[connectionList])

我看到了国家的真正变化。这就是为什么我不知道错误可能是什么。