因此，我有一个应用程序(link to repo)，用户可以在其中通过Rails Active Storage上传视频来发布帖子。当查看帖子时，我希望用户能够单击时间戳，这将更改帖子视频的currentTime并允许他们查找。我已经能够使视频显示并播放，但我找不到它。这是逐步进行的事情：
Rails呈现app/views/posts/_post_modal.html.haml，这是一种模式，当单击帖子上的按钮时，该模式可提供带有评论和提示的帖子的详细视图。下面是第17-26行，其中准备了用于反应的有效负载。我将视频的path作为属性传递给<div id="owc-post-payload">
.modal-body.border-dark
- reviews = Review.where(post_id: post.id)
- tips = []
- profiles = []
- reviews.each do |review|
- Tip.where(review_id: review.id).each { |tip| tips.push(tip) }
- profiles.push(Profile.find(review.profile_id))
#owc-post-payload{ post: post.to_json, video: rails_blob_path(post.video).to_json, reviews: reviews.to_json, profiles: profiles.to_json, tips: tips.to_json }
#owc_post
= javascript_pack_tag 'owc_post'
接下来，我的component's状态被初始化（由Redux管理）。 reviewsReducer.js中状态的一半。另一半在timestampReducer.js中。
在app/javascript/owc_post中，index.js在App.js中渲染/components（下），在VideoPlayer.js中渲染。
const App = (props) => (
<div className='row'>
<div className='col-xl-6 pr-3 sticky-top'>
<div className='mb-2 sticky-top'>
<VideoPlayer post={post.id} source={video} timestamp={props.timestamp} />
</div>
<button onClick={(e) => { props.dispatch(changeTime(15)) }}>=15</button>
<button onClick={(e) => { props.dispatch(changeTime(30)) }}>=30</button>
<button onClick={(e) => { props.dispatch(changeTime(45)) }}>=45</button>
</div>
<div className='col-xl-6'>
...
</div>
</div>
);
这是问题所在。当我单击<App/>（“ = 15”，“ = 30”，“ = 45”），{{ 1}}的更改，这也会更改state.timestampReducer的道具（如下）。这会触发<VideoPlayer/>，它会触发componentDidUpdate()内部的seek()，我清楚地看到我的组件正在通过seek()进行更新，但是视频的currentTime属性不会更改，并且我没有知道为什么。
console.log()我
Here I have a screenshot单击不同的按钮以及收到的反馈。最后一个export default class VideoPlayer extends React.Component {
constructor(props) {
super(props);
this.state = {
source: props.source,
timestamp: props.timestamp
};
this.videoRef = React.createRef();
}
componentDidUpdate(prevProps) {
if (this.props !== prevProps) {
this.setState(
{ timestamp: this.props.timestamp },
() => { this.seek() }
);
}
}
seek = () => {
console.log('inside seek')
console.log(this.state.timestamp)
console.log(this.videoRef.current)
console.log('before: ' + this.videoRef.current.currentTime)
this.videoRef.current.currentTime = this.state.timestamp;
console.log('after: ' + this.videoRef.current.currentTime)
}
render() {
return (
<div>
<video
ref={this.videoRef}
id='video-player'
height='200px'
type='video/mp4'
controls>
<source src={this.state.source} type='video/mp4' />
</video>
</div>
);
}
}是当我播放视频然后单击一个按钮时。单击按钮后，currentTime始终重置为0。
那是我的问题。我不能寻求它。请让我知道是否大家都需要更多信息，并在此先感谢您的帮助。
