Crochet de réaction, ComponentDidMount [duplicate]
Dans le document officiel de video.js https://docs.videojs.com/tutorial-react.html
nous avons
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }
Je veux créer un composant fonctionnel avec des crochets
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>
  )
}
J'ai un avertissement
ESLint: React Hook useEffect a une dépendance manquante: 'props'. Incluez-le ou supprimez le tableau de dépendances. (React-hooks / exhaust-deps)
Si je change le tableau de dépendances de []à [props] useEffects'exécute sur chaque rendu, je veux juste l'exécuter la première fois, commecomponentDidMount
Comment puis-je créer exactement à l' componentDidMountaide de crochets?
Réponses
Comme expliqué ici , vous avez utilisé useEffectcomme prévu. Un tableau de dépendances vide signifie qu'il ne s'exécutera qu'une seule fois (as componentDidMount). L'erreur signalée vous informe que si vous aviez réellement d'autres intentions, l'effet ne sera plus rendu.
Pour ignorer l'erreur, vous pouvez simplement coller le commentaire suivant // eslint-disable-line react-hooks/exhaustive-depsà la fin deuseEffect
useEffect(() => {
  player.current = videojs(videoNode.current, props);
  return () => {
    if (player.current) {
      player.current.dispose()
    }
  }
}, []); // eslint-disable-line react-hooks/exhaustive-deps
RÉFÉRENCE
Cette réponse l' explique plus en détail