Javascript react useCallback钩子在重新渲染时出现意外行为

也许我不明白钩子应该如何工作，但我尝试了许多不同的配置来将这个组件转换成钩子，但都失败了

export const VideoContainer = ({ localStream, remoteStream, status }: Props) => {
  const classes = useStyles();

  const setLocalStreamEl = useCallback(node => {
    console.log('useCallback');
    if (localStream && node && !node.srcObject) {
      console.log('setting srcObject');
      node.srcObject = localStream;
    }
  }, []);

  return (
    <InjectIntl>
      {intl =>
        localStream && remoteStream && status === intl.messages.inProgress ? (
          <div className={classes.videoDiv}>
            render something else
          </div>
        ) : (
          <div className={classes.videoDiv}>
            <video ref={setLocalStreamEl} className={classes.mainStream} autoPlay controls />
          </div>
        )
      }
    </InjectIntl>
  );
};

export-const-VideoContainer=（{localStream，remoteStream，status}:Props）=>{
const classes=useStyles（）；
const setLocalStreamEl=useCallback（节点=>{
log（'useCallback'）；
if（localStream&&node&&node.srcObject）{
log（'settingsrcobject'）；
node.srcObject=localStream；
}
}, []);
返回(
{intl=>
localStream&&remoteStream&&status==intl.messages.inProgress(
渲染其他东西
) : (
)
}
);
};

我使用视频流进行视频元素渲染，但状态道具每秒更新一次，在重新渲染时，它调用所有

useCallback

逻辑，导致视频令人烦恼地闪烁

我已经尝试添加了一个

useRef

回调，以及下面内容和

useffect

的不同组合，我已经阅读了100次文档，但我无法以一种有效的方式将所有片段组合在一起，也无法在每次渲染时重置ref

---

有什么想法吗？

}，[localStream]）？我也试过了，但它仍然会在每一个道具上呈现出奇怪的变化。唯一的可能是视频容器会不断地重新安装。在任何其他情况下，setLocalStreamEl只调用一次。考虑提供一种复制问题的方法。状态PROP接收什么值？它意味着什么？它每秒钟更新一个字符串，一个父组件有一个秒的计时器，用来显示时间和其他视频状态信息。我发现问题出在InjectIntl渲染道具上。当我把它改成HOC时，问题就消失了。IDK为什么
}，[localStream]）？我也试过了，但它仍然会在每一个道具上呈现出奇怪的变化。唯一的可能是视频容器会不断地重新安装。在任何其他情况下，setLocalStreamEl只调用一次。考虑提供一种复制问题的方法。状态PROP接收什么值？它意味着什么？它每秒钟更新一个字符串，一个父组件有一个秒的计时器，用来显示时间和其他视频状态信息。我发现问题出在InjectIntl渲染道具上。当我把它改成HOC时，问题就消失了。IDK为什么