reactjs - 视频源未在 useState() 上更新

Question

import React, { useState, useEffect } from 'react';
import rainClip from '../videos/rain.mp4';
import sunnyClip from '../videos/sunny.mp4';
import dullClip from '../videos/cloudy_black.mp4'
import '../App.css'
export default function Background({ weather }){
  const [clip, setClip] = useState(sunnyClip)
  console.log(clip)
  console.log('Background loaded')
  useEffect(() =>{
    if (weather[0].description.includes('дождь')){
      setClip(rainClip)
      console.log('Setted rain')
    }
    if (weather[0].description.includes('пасмурно')){
      setClip(dullClip)
      console.log('Setted dull')
    }
    if (weather[0].description.includes('ясно')){
      setClip(sunnyClip)
      console.log('Setted sun')
    }
  }, [weather])
 
    return(
        <video autoPlay loop muted
        style={{
          height: '100%',
          zIndex: '-1',
          left: '50%',
          transform: 'translate(-50%, 0%)',
          position: 'absolute'
        }}
        >
        <source src={clip} type="video/mp4" />
      </video>
    )
}

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

Answer 1

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

在 React 中，我们必须更改整个

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