Question

我有一个侦听传入的深层链接URL的函数：

ax.scatter(*point)

我有一个处理传入网址的功能：

useEffect(() => {
  Linking.addEventListener('url', handleUrl);
  return () => {
    Linking.removeEventListener('url', handleUrl);
  };
}, [handleUrl]);

说我通过打开URL const handleUrl = useCallback( (event) => { const { url }: { url: string } = event; if (user) { alert("Hello user!") ... } }, [user] );对用户进行身份验证 exp://xxx.xxx.xx.xx/auth?key=zxcvbn运行，对用户进行身份验证，并显示一个弹出窗口，提示“您好用户”。然后，用户更新其个人资料。更新了用户，并且handleUrl将重新运行，因为handleUrl有一个依赖项。用户会弹出另一个提示“ Hello user”的消息。我显然不想要那个。

我当时正在考虑使用链接来更改URL，但这很麻烦，而且还可以解决。

是否应该从数组中删除user依赖项？但是然后我得到了eslint错误。我应该忽略它吗？忽略不对吗？

处理此问题的最佳方法是什么？

Answer 1

如果您想要一个简单的解决方案-忽略eslint错误。最佳做法是注意效果中包含哪些变量-因此eslint希望您拥有“用户”，但并不总是有害于您的代码。

如果您仍然希望将其保留在依赖项中，则可以利用usePrevious钩子进行比较，如果用户对象不同，则不要显示弹出窗口。

usePrevious Hook：

function usePrevious(value) {
  // The ref object is a generic container whose current property is mutable 
  // ... and can hold any value, similar to an instance property on a class
  const ref = useRef();

  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes


  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

然后您可以执行以下操作：

const prevUser = usePrevious(user);
const handleUrl = useCallback(
    (event) => {
      const { url }: { url: string } = event;
      if (user.whatever == prevUser.whatever) {
        alert("Hello user!")
        ...
      }
    },
    [user, prevUser]
  );

在侦听传入URL时反应挂钩依赖关系

1 个答案: