Reactフック、ComponentDidMount [重複]

Question

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）

Iチェンジ依存配列した場合[]に[props] useEffect、それぞれの実行は、レンダリング、私はちょうどのような、最初の時間にそれを実行したいですcomponentDidMount

componentDidMountフックを使用して正確に作成するにはどうすればよいですか？

Answer 1

ここで説明したように、useEffect意図したとおりに使用しました。空の依存関係配列は、（としてcomponentDidMount）1回だけ実行されることを意味します。指摘されたエラーは、あなたが実際に他の意図を持っていたかどうかを知らせ、効果は再びレンダリングされません。

エラーを閉じるには// 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

参照

この答えはそれをより徹底的に説明します