我有一个Next.js应用程序,可以随机播放YouTube视频。我对应用程序的状态如下所示(在Redux store中):
const state = {
entities: {
videos: {
'vidId1': {
id: 'vidId1',
title: 'Video 1'
},
'vidId2': {
id: 'vidId2',
title: 'Video 2'
},
'vidId3': {
id: 'vidId3',
title: 'Video 3'
}
}
},
uncategorized: {
isFetching: false,
hasNextPage: false,
nextIndex: 0,
items: [
'vidId1',
'vidId2',
'vidId3'
]
}
};
然后我就有了我的主页,看起来如下所示:
// index.js
const Index = () => {
return (
<div>
<h1>Home Page</h1>
<RandomVideoButton />
</div>
);
};
链接到/random
。此页仅从状态获取下一个视频ID并重定向到/videes?ID={ID}
。它看起来是这样的:
// random.js
const RandomVideo = () => {
// Get next video ID
const nextVideoId = useSelector(state => state.uncategorized.items[state.uncategorized.nextIndex]);
// Redirect to next video
const router = useRouter();
router.push({
pathname: '/videos',
query: { id: nextVideoId }
});
return (
<div>Loading video...</div>
);
};
当我在/video?id={id}
上时,该页面将从state.entities.video
加载视频,然后更新state.uncategorized.nextidnex
。这就是问题发生的地方。当我分派动作更新状态下的下一个视频索引时,我陷入了一个无限的重新渲染循环。这就是watch.js
的外观:
const WatchVideo = () => {
// Get video ID from URL query
const router = useRouter();
const videoId = router.query.id;
// Get video
const { video, activeVideos } = useSelector(state => state.entities.videos[videoId]);
// Update video index
const dispatch = useDispatch();
dispatch({ type: 'INCREMENT_NEXT_INDEX' });
return (
<div className="col-12 col-lg-8 col-xl-9">
{video &&
<main>
<div className="embed-responsive embed-responsive-16by9">
<iframe id="player" src={'https://www.youtube-nocookie.com/embed/' + video.id}></iframe>
</div>
<h1>{video.title}</h1>
</main>
}
</div>
);
};
我的问题是,我不确定如何防止这种情况发生,同时仍然能够更新状态下的下一个视频索引。
您应该在react useEffect钩子中使用dispatch/routing。并且可以使用videoId作为useEffect依赖项。
斯塔克布利茨链接。
我猜这可能与从父级打开有关,但我有其他组件,它们内部的状态发生变化,所以我有点困惑,为什么这个组件不尊重它的新状态。 谢谢
我在使用时遇到一个错误。即使加载页面是新鲜的,没有按下任何按钮,我的按钮onClick事件侦听器激活了,正如我之前在主题中提到的,我的错误: “错误:重新呈现太多。React限制呈现次数以防止无限循环。”
问题内容: 我要说的是今天要学习react和redux,但是我不知道如何在状态更改后强制组件重新渲染。 这是我的代码: 我可以触发更新的唯一方法是使用 在构造函数内部,以便我手动触发组件的更新状态以强制重新渲染。 但是如何链接存储状态和组件状态? 问题答案: 仅当组件的状态或道具发生更改时,组件才会重新渲染。您不是依靠this.state或this.props,而是直接在render函数中获取存储
问题内容: 我正在使用react-router寻找一种更新页面URL /哈希的方法,而无需路由器重新渲染整个页面。 我正在开发一个全页轮播,并且希望每个幻灯片都有其自己的URL(允许用户刷新页面并返回正确的幻灯片)。转盘稍后将进行类似于此演示的滑动,这意味着 下 一张幻灯片已预渲染。 我的旋转木马的精简版在这里提供。 当前的幻灯片更改如下所示: 这可以正常工作,没有URL更新。我真正想要的是: 这
问题内容: 我的结构如下所示: 组件3应该根据组件5的状态显示一些数据。由于道具是不可变的,我不能简单地将其状态保存在组件1中并转发它,对吗?是的,我已经阅读了有关redux的内容,但不想使用它。我希望有可能通过反应来解决。我错了吗? 问题答案: 对于孩子与父母的通信,您应该传递一个将状态从父母设置为孩子的函数,如下所示 这样,孩子可以通过调用通过props传递的函数来更新父母的状态。 但是您将不