Eslint hook 重构 useEffect

Question

我像这样创建 useEffect 。 我想要 useEffect 听 useToken ，当我登录并设置令牌时，它会获取一些数据

  useEffect(() => {
    if (userToken) {
      setTimeout(() => {
        fetchDataWishlistShow();
        fetchCart();
      }, 500);
    }
    fetchCategory();
  }, [userToken]);

但是 Eslint 的 hook 自动添加了一些 function 到 Effect

  useEffect(() => {
    if (userToken) {
      setTimeout(() => {
        fetchDataWishlistShow();
        fetchCart();
      }, 500);
    }
    fetchCategory();
  }, [fetchCart, fetchCategory, fetchDataWishlistShow, userToken]);

为什么这样做。 我认为这是错误的，但有人可以为我解释吗？

Answer 1

我猜你安装了“eslint-plugin-react-hooks”并启用它。

useEffect的设计方式与您在useEffect中使用的方式相同，建议您将其添加到依赖项数组列表中，除了一些 React 保证不会在每次重新渲染时更改的内容，例如：调度 useReducer、setState form const [state, setState] = useState()或从其他文件导入的函数或变量。

您可以关闭规则，但您不应该这样做，因为您没有解决问题的根源。 例如

const [cartStatus, setCartState] = useState("all") // assume it can be "all", "pending"

const fetchCart = () =>{
   fetch(`endpoint/cart/${cardStatus}`)
}

useEffect(() => {
    if (userToken) {
      setTimeout(() => {
        fetchDataWishlistShow();
        fetchCart();
      }, 500);
    }
    fetchCategory();
    // This case you alway fetch all item in cart
  }, [userToken]);

要解决上面说的问题，是的，我们可以将fetchCart添加到依赖项列表中，但这会导致无限重新渲染，您需要通过 useCallback 包装fetchCart或将fetchCart移动到useEffect 。 因为您在 setTimeout 中调用了 function，所以您可能需要清理useEffect

const [cartStatus, setCartState] = useState("all") // assume it can be "all", "pending"


useEffect(() => {
   const fetchCart = () =>{
     fetch(`endpoint/cart/${cardStatus}`)
   }
   let id = null
    if (userToken) {
      id = setTimeout(() => {
        fetchDataWishlistShow();
        fetchCart();
      }, 500);
    }
    fetchCategory();
    return () => clearTimeout(id);  
  }, [userToken]);

本文由 Dan Abramov 撰写，是一个很好的资源，可以查看并深入了解useEffect工作原理以及为什么应该遵循推荐的方式。

您可能会说“不不，我只有在安装组件时调用 api，就是这样”。 但是当你的项目变大，你的组件变得复杂时，很难记住，谁知道你的需求在未来的某个时候可能会改变，为什么不以正确的方式去做，让你在重构或重构时更有信心更新你的组件？