ReactJS：数据未从连续响应中绑定

问题描述

在将 aws ivs 流媒体频道与测验相关的元数据集成时，当时获取元数据记录的 console.log 并且在将这些记录传递到另一个组件时，它不处理任何方式。

我在 codesandobx 中创建的游乐场

播放器组件

function PlayerComponent(options) {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = "https://player.live-video.net/1.0.0/amazon-ivs-player.min.js";
    script.async = true;

    document.body.appendChild(script);

    script.onload = (IVSPlayer) => {
      if (IVSPlayer.isPlayerSupported) {
        const player = IVSPlayer.create();
        player.attachHTMLVideoElement(document.getElementById("video-player"));
        player.load(
          "https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8"
        );
        player.play();
        player.addEventListener(
          IVSPlayer.PlayerEventType.TEXT_MetaDATA_CUE,(cue) => {
            const MetadataText = cue.text;
            setMetaData(MetadataText);
            console.log("PlayerEvent - MetaDATA: ",MetadataText);
          }
        );
      }
    };

    return () => {
      document.body.removeChild(script);
    };
  },[]);

  return (
    <div ref={divel}>
      <video id="video-player" ref={videoEl} autoplay controls></video>
      {MetaData !== undefined ? <QuizComponent Metadata={MetaData} /> : ""}
    </div>
  );
}

On QuizComponent 想要呈现那些元数据

export default function QuizComponent(props) {
  const questionData = props;

  return (
    <React.Fragment>
      <h2>{questionData.Metadata.question}</h2>
    </React.Fragment>
  );
}

但是任何方式都无法将数据渲染到组件中。

我将要实施的参考示例。 https://codepen.io/amazon-ivs/pen/XWmjEKN?editors=0011

解决方法

我发现了问题。基本上，您将 IVSPlayer 视为传递给脚本 onload 的箭头函数的参数，而该参数是一个事件（onload 事件）。
解决方案：const {IVSPlayer} = window;。事实上docs说

加载 amazon-ivs-player.min.js 后，它会向全局上下文添加一个 IVSPlayer 变量。

文档还解释了如何使用您可能感兴趣的 NPM 进行设置。

我更新了我的游乐场 here。 我还建议您编辑播放器的版本，因为最后一个是1.2.0。