Question

我正在尝试创建一个使用useCallback的自定义钩子函数功能。这是一个玩具示例：

export function useCustomLink(link: { url: string; description: string }) {

  const [updating, setUpdating] = useState<boolean>(false);
  const [linkInfo, setLinkInfo] = useState<{ url: string; description: string } | "loading" | "error">("loading");

  useEffect(() => {
    // initiate linkInfo
    if (!updating) {
      setLinkInfo(link);
    }
  }, [link]);

  const updateLink = useCallback((update: Partial<{ url: string; description: string }>) => {
    if (linkInfo !== 'loading' && linkInfo !== 'error') {
      const updated = { ...linkInfo, ...update };
      setLinkInfo(updated);
      setUpdating(true);
    }
  }, [linkInfo, link]);


  return {
    linkInfo, updateLink
  };
}

我对依赖项列表的理解是，我只需要添加直接由函数使用的变量（在这种情况下为linkInfo）。但是，如果我也不将link（传递给自定义钩子函数）也添加到列表中，那么我最终将得到linkInfo的陈旧状态。谁能帮助解释为什么我需要将add'l变量添加到依赖项中？这是使用useCallback的正确方法吗？

谢谢！

必须添加其他依赖项以响应useCallback依赖项列表

0 个答案: