React hook, ComponentDidMount [duplicate]

Question

Video.js'nin resmi belgesinde https://docs.videojs.com/tutorial-react.html

sahibiz

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

Kancalarla işlevsel bileşen oluşturmak istiyorum

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>
  )
}

Uyarıyorum

ESLint: React Hook useEffect'in bağımlılığı eksik: 'props'. Ya dahil edin ya da bağımlılık dizisini kaldırın. (React-hooks / exhaustive-deps)

I değişim bağımlılık dizisi Eğer []için [props] useEffecther biri üzerinde çalışır hale ben tıpkı ilk kez çalıştırın istiyorumcomponentDidMount

componentDidMountKanca kullanarak tam olarak nasıl yaratabilirim ?

Answer 1

Açıklandığı gibi burada , kullandığınız useEffectamaçlandığı şekilde. Boş bir bağımlılık dizisi, yalnızca bir kez (as componentDidMount) çalışacağı anlamına gelir . Belirtilen hata, gerçekten başka niyetleriniz varsa sizi bilgilendirir, etki tekrar oluşmaz.

Hatayı gidermek için aşağıdaki yorumu // eslint-disable-line react-hooks/exhaustive-depssayfanın sonuna yapıştırmanız yeterlidir .useEffect

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

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

REFERANS

Bu cevap onu daha kapsamlı bir şekilde açıklıyor