React hook, 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 / exhaustive-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

การอ้างอิง

คำตอบนี้จะอธิบายอย่างละเอียดมากขึ้น