React useEffect 中的间隔 - 将其存储在 useRef Hook 中以保留值超时警告

Question

所以我有这个方法：

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.

Answer 1

试试这个方法就可以了

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 或类似的地方，我们可以为您提供更多帮助

Answer 2

错误为您指明了正确的方向。使用 useRef 钩子来引用视频元素。由于 handleVideo 函数使 useEffect Hook 的依赖项在每次渲染时发生变化，我们将 handleVideo 定义包装到它自己的 useCallback() Hook 中。

import React, { useEffect, useRef, useCallback } from "react";

function Video() {
  const videoRef = useRef(null);

  const handleVideo = useCallback(() => {
    videoRef.current.play()
  }, [])

  useEffect(() => {
    const video = videoRef.current
    video.addEventListener('ended', handleVideo)

    return () => {
      video.removeEventListener('ended', handleVideo)
    }
  }, [handleVideo])



  return <video width="400" controls ref={videoRef} src="https://www.w3schools.com/html/mov_bbb.mp4" />
}

React useEffect 中的间隔 - 将其存储在 useRef Hook 中以保留值超时警告

Interval inside React useEffect - store it in a useRef Hook to preserve value overtime warning

javascript

intervals

reactjs

create-react-app

react-hooks