使用 useState 反应循环依赖

Question

这可能以前已经解决了，但是我当前有两个 useState 值，并且它们相互依赖。这是一些伪代码：

[getId, setId] = useState();
[getSearchParam1, setSearchParam1] = useSearchParams();

useEffect(() => {
  setId(getSearchParam1)
}, [getSearchParam1])

useEffect(() => {
  setSearchParam1(getId)
}, [getId])

其中 searchParam1 就是 www.google.com?searchParam1=xyz。这个想法是 searchParam 和 id 应始终是相同的值，但 searchParam 是一个可为空的值，而 id 要么设置为 '' 要么设置为实际 id。这段代码在大多数情况下都可以正常工作，但是当我点击浏览器上的后退按钮时，由于 searchParam 发生了变化，由于某种原因，useEffects 被同时激活，并不断尝试更新彼此的值。这会导致 useEffects 不断触发，永远重新加载页面，直到我刷新。有什么办法可以避免这种情况发生吗？

到目前为止，我已经尝试设置 isLoading 状态以过早地脱离 useEffects，但这似乎不是解决问题的最佳方法。可能有更好的方法我没有想到。

建议始终拥有详尽的钩子，因此我不想只删除 useEffect 中的依赖项，但我不确定还能做什么。

Answer 1

您最好的选择是将两种效果结合起来并比较值：

const [searchParam1, setSearchParam1] = useSearchParams();
const [id, setId] = useState();

useEffect(() => {
  if (id !== searchParam1) {
    setSearchParam1(id);
  }

  if (searchParam1 !== id) {
    setId(searchParam1);
  }
}, [id, searchParam1]);

但更好的方法是消除

id

状态并坚持使用

searchParam1

中的

useSearchParams

参数。