React hook, ComponentDidMount [중복]

Aug 15 2020

video.js의 공식 문서 https://docs.videojs.com/tutorial-react.html

우리는

  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }

후크가있는 기능적 구성 요소를 만들고 싶습니다.

export default function VideoPlayer(props) {
  const player = useRef(null);
  const videoNode = useRef(null);
  useEffect(() => {
    player.current = videojs(videoNode.current, props);

    return () => {
      if (player.current) {
        player.current.dispose()
      }
    }
  }, []);//I have problem with dependency array
  return (
    <div data-vjs-player>
      <video ref={videoNode} className="video-js"/>
    </div>
  )
}

경고가 있습니다

ESLint : React Hook useEffect에 누락 된 종속성 : 'props'가 있습니다. 포함하거나 종속성 배열을 제거하십시오. (react-hooks / exhaustive-deps)

종속성 배열을 에서 각 렌더링에서 실행 []하도록 변경하면 다음 [props] useEffect과 같이 처음에 실행하고 싶습니다.componentDidMount

componentDidMount후크를 사용하여 정확히 어떻게 만들 수 있습니까?

답변

1 DavidBuzatu Aug 15 2020 at 18:44

여기 에 설명 된 useEffect대로 의도 한대로 사용 했습니다. 빈 종속성 배열은 한 번만 실행됨을 의미합니다 (으로 componentDidMount). 지적 된 오류는 실제로 다른 의도가있는 경우 효과가 다시 렌더링되지 않음을 알려줍니다.

오류를 없애려면 // eslint-disable-line react-hooks/exhaustive-deps끝에 다음 주석 을 붙여 넣기 만하면 됩니다.useEffect

useEffect(() => {
  player.current = videojs(videoNode.current, props);

  return () => {
    if (player.current) {
      player.current.dispose()
    }
  }
}, []); // eslint-disable-line react-hooks/exhaustive-deps

참고

이 답변은 더 자세히 설명합니다.