Gancho React, ComponentDidMount [duplicado]
No documento oficial do video.js https://docs.videojs.com/tutorial-react.html
temos
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this)
});
}
Eu quero criar um componente funcional com ganchos
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>
)
}
Eu tenho aviso
ESLint: React Hook useEffect tem uma dependência ausente: 'props'. Inclua-o ou remova a matriz de dependência. (React-hooks / exaustive-deps)
Se eu mudar a matriz de dependência de []
para [props]
useEffect
rodar em cada render, quero apenas rodar na primeira vez,componentDidMount
Como posso criar exatamente componentDidMount
usando ganchos?
Respostas
Conforme explicado aqui , você usou useEffect
como pretendido. Uma matriz de dependência vazia significa que será executado apenas uma vez (as componentDidMount
). O erro apontado informa se você realmente tinha outras intenções, o efeito não será renderizado novamente.
Para descartar o erro, você pode simplesmente colar o seguinte comentário // eslint-disable-line react-hooks/exhaustive-deps
no final deuseEffect
useEffect(() => {
player.current = videojs(videoNode.current, props);
return () => {
if (player.current) {
player.current.dispose()
}
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
REFERÊNCIA
Esta resposta explica mais detalhadamente