web-dev-qa-db-ja.com

内部の間隔React useEffect-これをuseRefフックに保存して、値超過警告を保持します

だから私はこの方法を持っています：

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]);

今度はそれが言うところにエラーを投げます：

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.

これはどういう意味ですか？特にこの部分：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

この方法で試してみてください

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>

コードを jsfiddle に置くか、またはこのようないくつかのウェアを使用すると、より多くのことができます

0
masoud soroush