无法设置未定义(设置"播放器")反应播放器的属性

Question

我一直试图在ReactPlayer上使用seekTo()方法，但它一直告诉我this是未定义的。

function VideoPlayer({
endVideo,
timePlayed,
controls,
playing,
videoDuration
}) {
return (
<div className="video-player">
<ReactPlayer
ref={(player) => {
this.player = player;
}}
url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
playing={playing}
// playing={true}
controls={controls}
onStart={() => this.player.seekTo(timePlayed)}
onEnded={endVideo}
/>
</div>
);
}

ReactPlayer错误

Answer 1

为什么在箭头函数中使用这个?

试试这个:

import React from "react";
import ReactPlayer from "react-player";
let player;
export const VideoPlayer = ({
endVideo,
timePlayed,
controls,
playing,
videoDuration
}) => (
<div className="video-player">
<ReactPlayer
ref={(ref) => {
player = ref;
}}
url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
playing={playing}
// playing={true}
controls={controls}
onStart={() => player.seekTo(timePlayed)}
onEnded={endVideo}
/>
</div>
);
export const MemoizedVideoPlayer = React.memo(VideoPlayer);

Answer 2

试,集实例,帮助useState钩。

将处理程序包装在useCallback中，以防止不必要的重新渲染，但如果它们出现了，不要忘记它们的依赖关系。

不要忘记查看您正在使用的库的存储库，有时这很有帮助。

,我的建议是,更详细地了解函数。

另外，我做了一些小改动。

• 组件命名为video player。"videoduration"的属性可称为"duration"。这将是更正确的，我们不会失去理解转移的属性。
• Url将从props获取。指向外部的源，组件被重用。
• 重命名为"属性设置为"onend"。为了清晰起见，也就是说，它将被命名为与我们转移到react-player
的处理程序相似的处理程序。

让我们开始吧!

import React, { useState, useCallback } from "react";
import ReactPlayer from "react-player";
export const VideoPlayer = ({ url, onEnded, timePlayed, controls, playing, duration}) => {
const [instance, setInstance] = useState(null);
const handleStart = useCallback(() => {
if (instance) {
instance.seekTo(timePlayed)
}
}, [instance, timePlayed])
return (
<div className="video-player">
<ReactPlayer
ref={setInstance}
url={url}
playing={playing}
controls={controls}
onStart={handleStart}
onEnded={onEnded}
/>
</div>
)};