React hook, ComponentDidMount [duplikat]
W oficjalnym dokumencie video.js https://docs.videojs.com/tutorial-react.html
mamy
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this)
});
}
Chcę stworzyć funkcjonalny element z haczykami
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>
)
}
Mam ostrzeżenie
ESLint: React Hook useEffect ma brakującą zależność: „props”. Uwzględnij go lub usuń tablicę zależności. (Reakcje-hooki / wyczerpujące-deps)
Jeśli zmienię tablicę zależności z []
na [props]
useEffect
działa przy każdym renderowaniu, chcę po prostu uruchomić ją za pierwszym razem, na przykładcomponentDidMount
Jak dokładnie mogę tworzyć componentDidMount
za pomocą haczyków?
Odpowiedzi
Jak wyjaśniono tutaj , użyłeś useEffect
zgodnie z przeznaczeniem. Pusta tablica zależności oznacza, że będzie działać tylko raz (jako componentDidMount
). Wskazany błąd informuje, że jeśli rzeczywiście miałeś inne zamiary, efekt nie zostanie wyświetlony ponownie.
Aby odrzucić błąd, możesz po prostu wkleić następujący komentarz // eslint-disable-line react-hooks/exhaustive-deps
na końcuuseEffect
useEffect(() => {
player.current = videojs(videoNode.current, props);
return () => {
if (player.current) {
player.current.dispose()
}
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
ODNIESIENIE
Ta odpowiedź wyjaśnia to dokładniej