如何解决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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。