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]
useEffect
s'exécute sur chaque rendu, je veux juste l'exécuter la première fois, commecomponentDidMount
Comment puis-je créer exactement à l' componentDidMount
aide de crochets?
Réponses
Comme expliqué ici , vous avez utilisé useEffect
comme 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