Crochet de réaction, ComponentDidMount [duplicate]

Aug 15 2020

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

1 DavidBuzatu Aug 15 2020 at 18:44

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