react useEffect：像"authService._user"这样的外部范围值不是有效的依赖项，因为改变它们不会重新渲染组件

Question

我想使用 useEffect 来检查用户是否在菜单上登录了打印用户名。 但我收到此警告：

React Hook useEffect有一个不必要的依赖： "authService._user"。要么排除它，要么删除依赖项数组。外部作用域值(如"authService._user"(不是有效的依赖项，因为更改它们不会重新呈现组件 反应钩子/穷举部门

这是我在导航栏中的使用效果：

useEffect(() => {
setUsername(authService._user.username);
}, [authService._user])

这是我的授权服务示例：

interface User {
username: string;
password: string;
}
export class AuthorizeService {
_user: User = {
username: '',
password: ''
};
_isAuthenticated = false;
isAuthenticated() {
return this._isAuthenticated;
}
Authenticate(username: string, password: string) {
this._isAuthenticated = true; //I will add fetch latter here
this._user =  {
username: username,
password: password
}
}
}
const authService = new AuthorizeService();
export default authService;

顺便说一句，一切正常，但控制台中有警告。

我的问题是：这是正确的方法吗？以及为什么会有警告。

Answer 1

只有当它来自道具时，你才需要填充该数组。

查看"提示：通过跳过效果优化性能"部分中的 https://en.reactjs.org/docs/hooks-effect.html

但我建议阅读有关useEffects的整个文档，那里有一些重要的细节，这是一个简短的文档。

Answer 2

最少的错误重现和解释

我对一个大型项目中的错误有点困惑，但我理解为什么会发生这种情况并创建了一个最小的例子。考虑这个最小的 Next.js 示例与 Hoc：

页数/索引.js

import React from 'react'
function HomeHoc(msg) {
return function Home() {
React.useEffect(() => {
document.title = msg
}, [msg])
return <p>{ msg }</p>
}
}
export default HomeHoc('asdf')

我之前无意识地在React.useEffect中添加了msg，试图在几个地方满足react-hooks/exhaustive-deps，然后next lint给了我：

7：8 警告：React Hook React.useEffect 有一个不必要的依赖关系："msg"。要么排除它，要么删除依赖项数组。外部作用域值(如"msg"(不是有效的依赖项，因为更改它们不会重新呈现组件。 反应钩子/穷举部门

但显然，这种msg依赖关系不是必需的，因为msg是在HomeHoc范围内定义的，并且作为闭包进入Home组件。因此，一旦创建了Home，它显然无法更改。

因此，您应该按照 lint 消息的建议从依赖项列表中删除msg，因为它永远不会产生任何影响。

复制设置的其余部分：

包.json

{
"name": "with-eslint",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"license": "MIT",
"dependencies": {
"next": "12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"eslint": "^7.24.0",
"eslint-config-next": "12.0.7"
}
}

.eslintrc

{
"extends": "next",
"root": true
}