[英]How to fix "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" problem?
I want to use useEffect
, but when I add getUpperGroup
method, I get warning:我想使用
useEffect
,但是当我添加getUpperGroup
方法时,我收到警告:
React Hook useEffect has a missing dependency: 'getUpperGroups'.
React Hook useEffect 缺少依赖项:“getUpperGroups”。 Either include it or remove the dependency array"
包括它或删除依赖数组”
My code is:我的代码是:
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
}, [contentGroupData]);
const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});
const getUpperGroups = () => {
let newUpperGroups = upperGroups;
contentGroupData.forEach(content=>{
newUpperGroups = {...newUpperGroups, [content.id]: content.title};
})
setUpperGroups(newUpperGroups);
}
You can either:您可以:
Suppress that rule for the entire project: Go to .eslintrc file and change 'react-hooks/exhaustive-deps': 'error'
to 'react-hooks/exhaustive-deps': 'warn'
or 'react-hooks/exhaustive-deps': 'off'
为整个项目禁止该规则:转到 .eslintrc 文件并将
'react-hooks/exhaustive-deps': 'error'
更改为'react-hooks/exhaustive-deps': 'warn'
或'react-hooks/exhaustive-deps': 'off'
Supress the rule only in this instance:仅在这种情况下禁止规则:
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
}, [contentGroupData]);
const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});
const getUpperGroups = () => {
let newUpperGroups = upperGroups;
contentGroupData.forEach(content=>{
newUpperGroups = {...newUpperGroups, [content.id]: content.title};
})
setUpperGroups(newUpperGroups);
} // eslint-disable-line react-hooks/exhaustive-deps
You have two mistakes.你有两个错误。
1- You defined getUpperGroups after useEffect, so you can't add it to the list of useEffect dependencies. 1- 您在 useEffect 之后定义了 getUpperGroups,因此您无法将其添加到 useEffect 依赖项列表中。
2- if you add getUpperGroups to list of useEffect dependencies, useEffect will run on every re-render and you give a loop of re-render error. 2- 如果您将 getUpperGroups 添加到 useEffect 依赖项列表中,useEffect 将在每次重新渲染时运行,并且您会出现重新渲染错误的循环。
So there is two solutions.所以有两种解决方案。
1- Add getUpperGroups into useEffect 1- 将 getUpperGroups 添加到 useEffect
const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});
useEffect(() => {
const getUpperGroups = () => {
let newUpperGroups = upperGroups;
contentGroupData.forEach(content=>{
newUpperGroups = {...newUpperGroups, [content.id]: content.title};
})
setUpperGroups(newUpperGroups);
}
getUpperGroups();
}, [contentGroupData]);
2- Disable eslint 2- 禁用 eslint
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
// eslint-disable-line react-hooks/exhaustive-deps
}, [contentGroupData]);
const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});
const getUpperGroups = () => {
let newUpperGroups = upperGroups;
contentGroupData.forEach(content=>{
newUpperGroups = {...newUpperGroups, [content.id]: content.title};
})
setUpperGroups(newUpperGroups);
}
This one worked for me.这个对我有用。
Just add this comment at the last line of useEffect:只需在 useEffect 的最后一行添加此注释:
//eslint-disable-next-line //eslint-disable-next-line
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
//eslint-disable-next-line
}, [contentGroupData]);
Probably I would try to move the definition of getUpperGroups
into useEffect
.可能我会尝试将
getUpperGroups
的定义移动到useEffect
。 Also you can use .map()
and the previous state of your groups
state.您也可以使用
.map()
和groups
状态的先前状态。
Try as the following:尝试如下:
useEffect(() => {
const getUpperGroups = () => {
setUpperGroups(prevUpperGroups => contentGroupData.map((content) => ({
...prevUpperGroups,
[content.id]: content.title
})))
}
getUpperGroups();
setContentData(contentGroupData);
}, [contentGroupData]);
Just add getUpperGroups
to deps array in useEffect
只需添加
getUpperGroups
到DEPS阵列useEffect
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
}, [contentGroupData, getUpperGroups]);
But better to move code itself to useEffect
但最好将代码本身移动到
useEffect
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.