Javascript useEffect缺少依赖项:';用户';
我有一个特定的查询字符串,我正在寻找,当页面加载通过时,我需要更新我的用户状态为“高级”。我有: 我使用的是React功能组件,我的用户是一个对象,除了“premium”键之外,还包含许多其他值。据我所知,传递空数组Javascript useEffect缺少依赖项:';用户';,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我有一个特定的查询字符串,我正在寻找,当页面加载通过时,我需要更新我的用户状态为“高级”。我有: 我使用的是React功能组件,我的用户是一个对象,除了“premium”键之外,还包含许多其他值。据我所知,传递空数组[]将导致useffect仅在页面加载时运行。但是,这样做会产生一个错误: React Hook useffect缺少依赖项:“user”。。但是,当我在该数组中包含user时,页面会不断地重新加载(因为我正在更新它的值)。我还尝试传入了setUser,但没有成功。您可以将对象的属性
[]
将导致useffect仅在页面加载时运行。但是,这样做会产生一个错误:
React Hook useffect缺少依赖项:“user”。
。但是,当我在该数组中包含user
时,页面会不断地重新加载(因为我正在更新它的值)。我还尝试传入了setUser
,但没有成功。您可以将对象的属性作为依赖项传递给useffect
。我创造了一个工作环境
另外,不要太担心eslint规则react hooks/deps
,将其视为更多的指导原则,如果它迫使您添加您认为不应该添加的依赖项,也不要害怕添加eslint disable next line
import React,{useffect,useState}来自“React”;
导出默认函数App(){
const[user,setUser]=useState({count:0,premium:false});
useffect(()=>{
日志(“组件安装时”);
}, []);
useffect(()=>{
日志(“组件更新时”);
});
useffect(()=>{
console.log(“当保费发生变化时”);
},[user.premium]);
返回(
计数:{user.Count}
高级:{user.Premium}
setUser((prev)=>({…prev,count:prev.count+1}))}
>
增量计数
setUser((prev)=>({…prev,premium:!prev.premium})的
>
切换溢价
);
}
setUser(prevUser=>({…prevUser,premium:true}))
@PatrickRoberts你能教教教我吗-你们所有的高级代表有时会评论答案而不是实际提交答案背后的理论是什么?@Rustang已经多次回答了这个完全相同的问题的细微变化。。。仍在试图找到一个重复的答案。@Rustang有时在评论中提供足够的信息来解决问题会容易得多,但这本身就是一个不完整或糟糕的答案。但完整的答案总是最好的,以帮助那些可能对评论实施不善的未来人。另一方面,忽略eslint规则react hooks/deps
通常会由于保留过时的引用而导致细微的错误。总有一种方法可以满足详尽的依赖关系,即使它有时比您希望的要详细一点。恕我直言,单元测试比linter更善于发现依赖关系错误。使代码过于冗长以平息误读可能会损害代码的可读性和可维护性,而实际上并没有提供很大的信心。
useEffect(() => {
const queryString = require('query-string');
const values = queryString.parse(window.location.search);
console.log('before' + user.premium);
if (values.premium !== ''){
setUser({...user, premium: true});
}
console.log('after' + user.premium);
}, []);