React hook, ComponentDidMount [duplikat]

Aug 15 2020

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] useEffectdziała przy każdym renderowaniu, chcę po prostu uruchomić ją za pierwszym razem, na przykładcomponentDidMount

Jak dokładnie mogę tworzyć componentDidMountza pomocą haczyków?

Odpowiedzi

1 DavidBuzatu Aug 15 2020 at 18:44

Jak wyjaśniono tutaj , użyłeś useEffectzgodnie 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-depsna 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