Reaktionshaken, ComponentDidMount [Duplikat]

Question

Im offiziellen Dokument von video.js https://docs.videojs.com/tutorial-react.html

wir haben

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

Ich möchte eine Funktionskomponente mit Haken erstellen

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

Ich habe eine Warnung

ESLint: React Hook useEffect hat eine fehlende Abhängigkeit: 'Requisiten'. Schließen Sie es entweder ein oder entfernen Sie das Abhängigkeitsarray (React-Hooks / erschöpfende Deps).

Wenn ich das Abhängigkeitsarray von []auf [props] useEffectin ändert , wird es bei jedem Rendern ausgeführt, möchte ich es nur beim ersten Mal ausführen, zcomponentDidMount

Wie kann ich componentDidMountmit Hooks genau erstellen ?

Answer 1

Wie hier erklärt , haben Sie useEffectwie vorgesehen verwendet. Ein leeres Abhängigkeitsarray bedeutet, dass es nur einmal (als componentDidMount) ausgeführt wird. Der aufgezeigte Fehler informiert Sie, wenn Sie tatsächlich andere Absichten hatten, der Effekt wird nicht erneut gerendert.

Um den Fehler zu beheben, können Sie einfach den folgenden Kommentar // eslint-disable-line react-hooks/exhaustive-depsam Ende von einfügenuseEffect

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

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

REFERENZ

Diese Antwort erklärt es genauer