React Video组件点击后控制台打印play为false的生命周期疑问

AI 小北

2026-9-30

问题根因

你的现象由React state异步更新特性、useEffect清理函数逻辑错误、缺少播放结束监听三个问题共同导致：

React的state更新是异步批量处理的，调用setPlay(true)后，当前作用域内的play变量仍然是本次渲染的旧值，需要等组件完成重渲染后才会拿到更新后的state。你在点击回调内和setPlay同作用域打印play，拿到的永远是点击前的状态，所以输出false。
useEffect的清理函数会在每次依赖项变化、下一轮effect执行前触发，你在清理函数中写了setPlay(false)，相当于你刚把play改为true触发effect前，状态就被清理函数重置为false，逻辑完全错误。
你没有绑定video的ended事件，视频播放结束后不会触发状态变更，永远不会打印预期的结束状态false。

修正后代码

const Video = ({src, type, index, isAutoPlay}) => {
  
  const [play, setPlay] = useState(isAutoPlay)
  const playRef = useRef();

  // 状态变更后再执行播放/暂停逻辑和打印
  useEffect(() => {
    if (!playRef.current) return
    if (play) {
      playRef.current.play();
      console.log(true)
    } else {
      playRef.current.pause();
      console.log(false)
    }
  }, [play]);

  // 监听播放结束事件修改状态
  const handleEnded = () => setPlay(false)

  return (
    <>
      <video 
       className="slide" 
       ref={playRef} 
       onClick={() => setPlay(true)}
       onEnded={handleEnded}>
        <source src={src} type={type} key={index}/>
        Your browser does not support the video tag.
      </video>
    </>
  )
}