Перехватчик React, ComponentDidMount [дубликат]

Question

В официальном документе video.js https://docs.videojs.com/tutorial-react.html

у нас есть

  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }

Я хочу создать функциональный компонент с крючками

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>
  )
}

У меня есть предупреждение

ESLint: у React Hook useEffect отсутствует зависимость: 'props'. Либо включите его, либо удалите массив зависимостей. (React-hooks / excustive-deps)

Если я изменю массив зависимостей с []на [props] useEffectзапускается на каждом рендере, я просто хочу запустить его в первый раз, напримерcomponentDidMount

Как я могу творить componentDidMountс помощью крючков?

Answer 1

Как здесь объясняется , вы использовали useEffectпо назначению. Пустой массив зависимостей означает, что он будет запущен только один раз (как componentDidMount). Указанная ошибка информирует вас, если у вас действительно были другие намерения, эффект больше не будет отображаться.

Чтобы отклонить ошибку, вы можете просто вставить следующий комментарий // eslint-disable-line react-hooks/exhaustive-depsв конецuseEffect

useEffect(() => {
  player.current = videojs(videoNode.current, props);

  return () => {
    if (player.current) {
      player.current.dispose()
    }
  }
}, []); // eslint-disable-line react-hooks/exhaustive-deps

СПРАВКА

Этот ответ объясняет это более подробно