我正在实现一个电影搜索应用程序;单击搜索后将返回其中的电影。
在结果列表中,用户可以给出";像";播放给他们的电影。
然而,如果用户选择按赞排序,我的排序功能实际上是对"我的排序"进行排序;旧的";搜索结果,而一些电影的赞数可能由于用户输入而改变。
因此,我想重新加载页面,以便页面返回服务器加载新数据,然后再次进行排序。
我想知道是否有一种方法可以通过调用我当前的URL来重新加载页面,然后我在URL上添加一个额外的参数,比如(按不喜欢排序(。这样我就可以知道我应该在服务器端函数中对它进行排序
或者如果有一个简单的方法来处理这种情况
编辑以更好地说明
搜索结果是电影的列表
第1阶段
1。巨大的类似:3
2。蜘蛛侠类似:3
第2阶段(用户点赞第二阶段(
1。巨大的类似:3
2。蜘蛛侠喜欢:4<-----由于用户给出了提升点而增加的同类数量(
第3阶段用户突然想对结果进行排序;然后我对结果进行快速排序。
1。巨大的类似:3
2。蜘蛛侠类似:3<------由于结果是旧的,因此不更新结果
路由功能我正在使用
router.push({
pathname: "/search",
query: {sort: sort}
)
但是重新装载是不干净的。组件仍在缓存
[编辑2]
在结果列表中的每个项目中,它实际上都由一个结果卡组件包装
因此,总而言之,服务器将搜索结果传递到搜索页面。然后我迭代结果,然后返回一些结果卡。
在结果卡中,它允许用户进行类似提高赞的操作。我之所以可以在不调用API的情况下保持它的动态,是因为我保持了这两个钩子。
const [likeCount, setLikeCount] = useState(movie.likeBy.length);
const [liked, setLiked] = useState(false);
但问题是,当用户点击";排序";,甚至它会得到新的排序搜索结果。结果卡组件仍然保留以前的数据值。这会使新的渲染变得奇怪。这就是为什么我想进行一个完整的重新加载,可以清除所有组件的状态。
我发现router.push不能完成的工作
希望这个解释清楚
为什么需要重新加载页面以获取新数据?您可以在同一URL中执行此操作让我们假设您的baseurl==>gt>quot;获取电影?sortby=";如果您不在sortby中传递值,那么它将获取所有数据在sortby查询中添加值后,它将获取已排序的数据sorturl====>gt>quot;获取电影?sortby=like";
您可以使用乐观UI(即持久性(,我已经将其与GraphQL一起使用过,Facebook也使用了类似的东西。一旦用户喜欢一部电影,React就会更新用于渲染UI的缓存。它在后台进行API调用,如果成功,UI将保持不变(因此是乐观的(。
编辑:在你更新了你的问题后,我想我们可以调查各州。目前,当用户喜欢一部电影时,您正在更新状态,但当他们再次对其进行排序时,我们第一次使用从服务器返回的旧结果对象或数组。如果我们不在每次用户对结果进行排序时调用服务器,我们可以将结果副本存储在从API获取的组件状态中,并将其视为动态呈现的数据源。现在,如果用户喜欢电影,则更新结果对象的本地状态,它将导致渲染并更新UI。当用户试图对电影进行排序时,您使用本地州,该州拥有所有最新信息并对其进行排序