reactjs videojs 질문드립니다!! ㅜㅜ 도와주세요

Question

react, node,mongodb를 연동하여 개발중인 대학생입니다. videojs를 사용하여 비디오에 마크업표시를 하려고 하는데 usestate로 값을 넣어놓으면 표시가 되는데 axios를 사용하여 값을 받아와서 넣으려고 하니 표시가안돼요ㅜㅜ 제가 리액트 생명주기? 를 잘 몰라서 그런거 같은데 useEffect(() &#61;> { Axios.get('/marker').then(e &#61;> {setmarkers(e.data.markers)}) }, [])마크업 표시를 할 데이터를 {time :10 , val : &#34;hi&#34; , text:&#34;hello&#34;} 이런식으로 값을 받아오는데 useEffect(() &#61;> { if (videoPlayerRef) { // eslint-disable-next-line react-hooks/exhaustive-deps player &#61; videojs(videoPlayerRef.current, videoJSOptions, () &#61;> { player.src(videoSrc); player.on(&#34;ended&#34;, () &#61;> { console.log(&#34;ended&#34;); }); player.on(&#34;play&#34;, function(){ console.log(markers) console.log(newMarkers) }) player.on(&#34;timeupdate&#34;, function(){ setCurrentTime(player.currentTime()); }) player.on('pause', function () { //현재 비디오 정지 체크 var isPaused &#61; player.paused(); if (isPaused) { //정지 되었다면 현재 멈춘만큼의 시간을 체크해서 저장. setCurrentVal(Number(player.cache_.currentTime)) } return false; }) }); player.markers({ markerStyle: { 'width':'7px', 'border-radius': '30%', 'background-color': 'red' }, markerTip:{ display: true, text: function(markers) { return &#34;제목: &#34;&#43; markers.text; }, time: function(markers) { return markers.time; } }, breakOverlay:{ display: false, displayTime: 3, style:{ 'width':'100%', 'height': '20%', 'background-color': 'red', 'color': 'white', 'font-size': '17px' }, text: function(markers) { return &#34;Break overlayddddddd: &#34; &#43; markers.overlayText; } }, onMarkerClick: function(marker) {console.log(&#34;Ddddddddddddddddddd&#34;)}, onMarkerReached: function(marker) {setValues(marker.val)}, markers: markers }) } return () &#61;> { } }, []);이렇게 값을 넣으려고 하면 markers에 값이 안들어가는데 해결법있을까요?

페코옹 · Answer

useEffect 사용법에 대한 확인이 필요하실거 같습니다. useEffect의 deps에 아무것도 넣지 않으면 최초 한번만 실행이 됩니다. 위 상황에서 useEffect를 정상적으로 동작시키려면 useEffect(() &#61;> { if(videoPlayerRef.current && markers) { 코드}},[videoPlayerRef, markers]) videoPlayerRef와 makers가 변경이 될때 마다 useEffect를 실행하게 하도록 위와 같이 해주셔야 합니다. 그리고 아래 코드가 있는데 이걸 왜 넣으셨지요!?// eslint-disable-next-line react-hooks/exhaustive-deps

showt · Answer

피드백 감사합니다! 해당코드는 제가 계속 수정을 반복하다 보니 못지운거 같아요 코드를 수정해 봤는데 TypeError: player.markers is not a function 67 | setPlayer2(player) 68 | 69 | > 70 | player.markers({ | ^ 71 | markerStyle: { 72 | 'width':'7px', 73 | 'border-radius': '30%',이렇게 에러가 뜨더라구요ㅜㅜㅜ Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.콘솔창에 이러한 에러가 같이 뜨는 상황입니다

reactjs videojs 질문드립니다!! ㅜㅜ 도와주세요

2개의 답변

#videojs 목록