web-dev-qa-db-fra.com

Intervalle à l'intérieur React useEffect - stockez-le dans un crochet useRef pour conserver la valeur d'avertissement d'heures supplémentaires

J'ai donc cette méthode:

useEffect(() => {
    //.. other logic here

    // Firefox doesn't support looping video, so we emulate it this way
    video.addEventListener(
      "ended",
      function() {
        video.play();
      },
      false
    );
  }, [videoWidth, videoHeight]);

Maintenant, il lance une erreur où il dit:

Assignments to the 'interval' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.

Je suis confus sur ce que cela signifie? surtout cette partie: To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property.

javascriptreactjscreate-react-appintervalsreact-hooks
4
I am L

essayez de cette façon ce sera le travail

const video = useRef(null);
const videoPlay = () => { //just hate stateFull Function
        video.current.play();
      }
useEffect(() => {
    //.. other logic here

    // Firefox doesn't support looping video, so we emulate it this way
    video.addEventListener(
      "ended",
      videoPlay,
      false
    );
    return video.removeEventListener("ended", videoPlay, true)
  }, [videoWidth, videoHeight, video]);

   <video ref={video}>
      <source src={src} type="video/mp4" />
   </video>

si vous mettez le code dans jsfiddle ou quelque whare comme celui-ci, nous pouvons vous aider davantage

0
masoud soroush