प्रतिक्रिया हुक, ComponentDidMount [डुप्लिकेट]

Aug 15 2020

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: रिएक्ट हुक का उपयोग करें एक लापता निर्भरता है: 'सहारा'। या तो इसे शामिल करें या निर्भरता सरणी को हटा दें। (प्रतिक्रिया-हुक / थकाऊ-डिप्स)

यदि मैं प्रत्येक रेंडर पर निर्भरता सरणी []को [props] useEffectरन से बदलता हूं , तो मैं इसे पहली बार चलाना चाहता हूं, जैसेcomponentDidMount

मैं वास्तव में componentDidMountहुक का उपयोग करके कैसे बना सकता हूं ?

जवाब

1 DavidBuzatu Aug 15 2020 at 18:44

जैसा कि यहाँ बताया गया है , आपने 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

संदर्भ

यह उत्तर इसे और अच्छी तरह से समझाता है