Javascript ReactJs：静态设置视频源url有效，但动态设置无效'；行不通

我正在尝试使用

video

标记和从后端接收的Url显示视频。
问题是：
即使一切正常，我收到了正确的url，视频也无法显示。

当我将相同的url设置为时，静态地说，它可以工作
我在这里显示视频标签中使用的src以及视频，它们在动态和静态方法上完全相同。 然而，动态方法不起作用

代码如下：

class ProfilePage2 extends Component {
  componentDidMount() {
    console.log("Inside ProfilePage.componentDidMount");
    this.props.getCurrentProfile();
  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps: ", nextProps);
  }
  render() {
    console.log("Rerendering");
    // this.props.profile contains all the different profile data not just personal profile
    const { profile } = this.props.profile;
    console.log("deconstructed personal profile data: ", profile);
    let videoUrlToDisplay;
    if (profile) {
      videoUrlToDisplay = profile.videoURL;
    }
    if (videoUrlToDisplay == undefined) {
      console.log("videoUrlToDisplay is undefined.");
    } else {
      // This gets logged with the video url
      console.log(
        "videoUrlToDisplay is NOT undefined. This is its value: ",
        videoUrlToDisplay
      );
    }
    return (
      <div>
        <h1>Setting source dynamically: </h1>
        <div>src= {videoUrlToDisplay}</div>
        <div>
          <video controls="true" class="embed-responsive-item">
            <source src={videoUrlToDisplay} type="video/mp4" />
          </video>
          <hr />
          <br />
          <h1>Setting source statically: </h1>
          <div>src= {videoUrlToDisplay}</div>
          <div>
            <video controls="true" class="embed-responsive-item">
              <source
                src="https://res.cloudinary.com/dmam8ayrw/video/upload/v1602733968/yvaor"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
      </div>
    );
  }
}

class ProfilePage2扩展组件{
componentDidMount（）{
log（“insideprofilepage.componentDidMount”）；
this.props.getCurrentProfile（）；
}
组件将接收道具（下一步）{
log（“nextrops:”，nextrops）；
}
render（）{
控制台日志（“重新招标”）；
//此.props.profile包含所有不同的配置文件数据，而不仅仅是个人配置文件
const{profile}=this.props.profile；
console.log（“解构的个人配置文件数据：”，配置文件）；
让视频播放；
如果（配置文件）{
videoUrlToDisplay=profile.videoURL；
}
if（videoUrlToDisplay==未定义）{
log（“videoUrlToDisplay未定义”）；
}否则{
//这将与视频url一起记录
console.log(
videoUrlToDisplay不是未定义的。这是它的值：“，
视频显示
);
}
返回(
动态设置源：
src={videoUrlToDisplay}



静态设置源：
src={videoUrlToDisplay}
);
}
}

---

我不明白为什么会这样。一切都应该完美运作。我在src中使用的url已被正确记录和显示，但视频不起作用。

您是否能够复制这是一个演示？我用cloudinary文档中的视频将您的代码复制到CodeSandbox中，并以两种方式复制。我的线索是，你从道具上得到的绳子实际上并不完全相同。它可能有一些拙劣的空格或其他东西。@lindapaste嘿，Linda，我通过复制以前可以工作的代码解决了这个问题。谢谢你的帮助