bounty将在3天后过期。回答此问题可获得+50声望奖励。Patira希望引起更多人关注此问题。
让我给予你一些背景：
我尝试使用React Query的useMutation修改服务器上的一些数据（您可以将其视为设置本地状态，因为在某种程度上行为是相同的）。
但是我想做的改变应该依赖于router.query上的一些查询参数。
例如，如果router.query.token被设置（不是错误的或未定义的），那么变异应该发生。
现在我知道我们可以使用Effect来实现类似的效果，这样就不会出现无限循环：
useEffect(() => {
if (router?.query?.token) {
sampleMutation({
sampleData: "Sample Data",
...router.query,
});
}
}, [router?.query?.token, sampleMutation]);我想知道是否有另一种方法来实现这一点，而不使用效果。
因为我尝试过的所有解决方案都导致了无限循环。
我尝试过的解决方案之一是这样的，它导致了一个无限循环：
https://beta.reactjs.org/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
现在我认识到我的方法可能是完全错误的，所以我尝试探索是否有任何替代使用效果的情况。
1条答案
按热度按时间clj7thdc1#
在对我的问题思考了很多之后，我最终得出了这样的结论：
还有一种替代方法，我真的不需要使用效果。
让我解释一下这个问题。
我想使用类似这样的东西，而不是使用效果：
问题是当
router.query.token被设置时，它总是被设置的！所以sampleMutation在这个条件中反复出现。Effect使
sampleMutation和条件只发生一次，或者在依赖项更改时重新呈现。防止无限循环的唯一方法是在设置查询参数时将其删除。
假设这是我们的网址：
http://localhost:3000/sample-url在这个页面上，我将点击一个按钮，在设置了变异之后，一个查询参数被添加到URL的其余部分，它变成了这样：
http://localhost:3000/sample-url?token=12345此
token查询参数为undefined，未设置值。因此，很自然地，它会在页面（组件）内部进行无限循环，并反复设置变量（状态）。
为了防止这种情况发生，我所要做的就是在设置变异（状态）之后立即删除查询参数。
这是我最后的方法
我很困惑，我认为突变（状态）导致了无限循环。更确切地说，是
router.query.token本身。