关于useEffect的警告

Question

useEffect(() => {
    if (jwt !== null) {
      history.push("/");
    }
  }, [jwt]);

老师，对于上面的代码，项目运行时会提示警告，如下，貌似提示需要把history也放入 useEffect的依赖中，但是history应该不会变化把，怎么去除这种警告呢。

src/pages/signIn/SignInForm.tsx
  Line 29:6:  React Hook useEffect has a missing dependency: 'history'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

还有这里也有，提示需要把dispatch 和 keywords 放入。

useEffect(() => {
    dispatch(
      searchProduct({
        nextPage: 1,
        pageSize: 10,
        keywords,
      })
    );
  }, [location]);

src/pages/search/SearchPage.tsx
  Line 33:6:  React Hook useEffect has missing dependencies: 'dispatch' and 'keywords'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Answer 1

阿莱克斯刘 2021-03-21 02:41:41

这些警告我也没注意，你观察的很仔细。是的，出现这样的警告虽然不会影响网站运行，但是的确很烦人。修复这个问题就按照警告的要求，把history、dispatch和keywords加入依赖列表就好了。除非route变化，否则history不会发生改变；dispatch全局范围内不会改变；而keyword来自url，只要url不变useeffect也不会激活。