视频源未在 useState() 上更新

Question

import React, { useState, useEffect } from 'react';\nimport rainClip from '../videos/rain.mp4';\nimport sunnyClip from '../videos/sunny.mp4';\nimport dullClip from '../videos/cloudy_black.mp4'\nimport '../App.css'\nexport default function Background({ weather }){\n  const [clip, setClip] = useState(sunnyClip)\n  console.log(clip)\n  console.log('Background loaded')\n  useEffect(() =>{\n    if (weather[0].description.includes('\xd0\xb4\xd0\xbe\xd0\xb6\xd0\xb4\xd1\x8c')){\n      setClip(rainClip)\n      console.log('Setted rain')\n    }\n    if (weather[0].description.includes('\xd0\xbf\xd0\xb0\xd1\x81\xd0\xbc\xd1\x83\xd1\x80\xd0\xbd\xd0\xbe')){\n      setClip(dullClip)\n      console.log('Setted dull')\n    }\n    if (weather[0].description.includes('\xd1\x8f\xd1\x81\xd0\xbd\xd0\xbe')){\n      setClip(sunnyClip)\n      console.log('Setted sun')\n    }\n  }, [weather])\n \n    return(\n        <video autoPlay loop muted\n        style={{\n          height: '100%',\n          zIndex: '-1',\n          left: '50%',\n          transform: 'translate(-50%, 0%)',\n          position: 'absolute'\n        }}\n        >\n        <source src={clip} type="video/mp4" />\n      </video>\n    )\n}\n

\n

我正在尝试制作一个具有与当前天气相符的动态背景的天气应用程序。但是，尽管剪辑状态已更新，但我的元素并未更新视频。\n是否可以动态更改视频背景？

\n

Answer 1

有同样的问题，在阅读另一个线程后设法解决它：Video displayed in ReactJS component not update

在 React 中，我们必须更改整个 <video> 元素，而不仅仅是 <source> 元素，才能看到视频的变化。删除源元素，我们可以尝试这样做：

...
return(
        <video autoPlay loop muted
        style={{
          height: '100%',
          zIndex: '-1',
          left: '50%',
          transform: 'translate(-50%, 0%)',
          position: 'absolute'
        }}
        src={clip}
        type="video/mp4"
        />
        
   
    );