我们可以将变量添加为不属于 useEffect 的依赖项吗？

Question

useEffect(()=>{
    history.push("/home")
  },[token, history])

即这里的令牌不是 useEffect 的一部分，但我想将其添加为 useEffect 的依赖项。我可以这样做吗？如果不是那为什么？

Answer 1

是的，你绝对可以。对该变量的任何更改都会触发 useEffect。

Answer 2

useEffect(()=>{
  history.push("/home");
}, [token, history]);
i.e Here token is not part of useEffect but I want to add it as a dependencies of useEffect. Can I do this? If not then why?

是的，您可以包括或省略任何依赖项，或者省略整个依赖项数组。

It works fine but I thought we should only add variable which should be part of useEffect.

查看官方文档，Rules of Hooks and Conditionally firing an effect，请注意没有规则或要求依赖项只能是挂钩回调中引用的值。

在每渲染后触发一个效果，不包括依赖数组。
```
useEffect(() => console.log('every render'));
```
仅在挂载时触发一个效果通过包含一个空的依赖数组。

useEffect(() => console.log('on component mount only'), []);

有条件地触发一个效果通过在你想要效果回调的依赖数组中包含值运行更新后。

useEffect(() => { console.log('any time a, b, or c update'); // or d or e }, [a, b, c, d, e]);

React 建议您使用 ESLint Plugin (eslint-plugin-react-hooks) 来帮助执行 Hooks 规则并提出依赖性建议。请注意，尽管这些只是固执己见的建议，并且当包含 more 依赖项或没有依赖项（例如安装效果）时，此插件会警告您。另请注意，这 只是警告 而不是错误（常见的误解）。

Answer 3

我建议遵循 React 文档给出的指南，并正确提供依赖数组。

也许您可以执行以下操作：

useEffect(()=>{
  if (token) {
    history.push("/home")
  }
},[token, history])

获得提示的一种简单方法是使用 eslint-plugin-react-hooks React 提供的官方 eslint 插件，参见 documentation here。

还请注意，通常情况下，如果您正在使用一些导入的东西，例如您的示例中可能是 history，那将不会改变，因此没有必要将其添加到依赖项数组中。

我们可以将变量添加为不属于 useEffect 的依赖项吗？

Can we add variable as a dependencies which is not part of useEffect?

javascript

frontend

reactjs

redux

react-context