質問: stream setRemoteVideoData(remoteVideoData => [...remoteVideoData, remoteVideo]) }) return( 〜〜〜〜〜〜〜〜〜〜 { Object.keys(remoteVideoData).map((remoteStream) => { return( ) })} 〜〜〜〜〜〜〜〜〜〜 ) } ``` しかし、期待するような動作はせず、 ``` Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref ``` と関数コンポーネントではuseRefを使った方がよい旨のエラーがでてしまいます。 これはRefをオブジェクトに格納しているからおきているエラーなのでしょうか、 それとも根本的に何か間違っているのでしょうか。 つたない質問文で意図が把握できない部分がありましたらご指摘いただければ修正いたします。 正直自分で調べていてもかなり詰まってしまっていて、ご指摘と実現方法のアドバイスをいただきたいです。 よろしくお願いいたします。
回答: ``` room.on('stream', stream => { setRemoteVideoData(oldRemoteVideoData => [...oldRemoteVideoData, stream]) }) ``` でMediaStreamをstateに格納して、 ``` remoteVideoData.map((videoData, index) => { return ( ) }) ``` 格納したMediaStreamをコンポーネントに渡し、 useEffectでMediaStreamをRefに格納して参照するようにすると、意図した動作が実現できました。 ``` const RemoteVideo = (props) => { const videoRef = useRef() useEffect(() => { videoRef.current.srcObject = props.videoData }) return( ) } ```