React hook, ComponentDidMount [trùng lặp]

Aug 15 2020

Trong tài liệu chính thức của video.js https://docs.videojs.com/tutorial-react.html

chúng ta có

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

Tôi muốn tạo thành phần chức năng với các hook

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

Tôi có cảnh báo

ESLint: Sử dụng React HookEffect thiếu phụ thuộc: 'props'. Bao gồm nó hoặc loại bỏ mảng phụ thuộc. (React-hooks / expustive-deps)

Nếu tôi thay đổi mảng phụ thuộc []thành [props] useEffectchạy trên mỗi lần hiển thị, tôi chỉ muốn chạy nó vào lần đầu tiên, nhưcomponentDidMount

Làm cách nào tôi có thể tạo chính xác componentDidMountbằng cách sử dụng hook?

Trả lời

1 DavidBuzatu Aug 15 2020 at 18:44

Như đã giải thích ở đây , bạn đã sử dụng useEffectnhư dự định. Một mảng phụ thuộc trống có nghĩa là nó sẽ chỉ chạy một lần (dưới dạng componentDidMount). Lỗi được chỉ ra thông báo cho bạn biết nếu bạn thực sự có ý định khác, hiệu ứng sẽ không hiển thị lại.

Để loại bỏ lỗi, bạn có thể chỉ cần dán nhận xét sau // eslint-disable-line react-hooks/exhaustive-depsvào cuốiuseEffect

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

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

TÀI LIỆU THAM KHẢO

Câu trả lời này giải thích nó kỹ hơn