Question

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

React Hook useEffect具有不必要的依赖性： 'authService._user'。排除它或删除依赖项数组。 诸如“ authService._user”之类的外部作用域值不是有效的依赖项 因为对它们进行突变不会重新渲染组件反应钩/详尽的下降

这是我在 navbar 中使用的效果：

    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的整个文档，那里有一些重要的细节及其简短的文档。

react useEffect：像'authService._user'这样的外部作用域值不是有效的依赖项，因为对其进行突变不会重新呈现该组件

1 个答案: