![](/img/trans.png)
[英]How can I fix “React Hook useEffect has a missing dependency. Either include it or remove the dependency array” problem?
[英]How to fix "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" problem?
我想使用useEffect
,但是当我添加getUpperGroup
方法时,我收到警告:
React Hook useEffect 缺少依赖项:“getUpperGroups”。 包括它或删除依赖数组”
我的代码是:
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);
}
您可以:
为整个项目禁止该规则:转到 .eslintrc 文件并将'react-hooks/exhaustive-deps': 'error'
更改为'react-hooks/exhaustive-deps': 'warn'
或'react-hooks/exhaustive-deps': 'off'
仅在这种情况下禁止规则:
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
你有两个错误。
1- 您在 useEffect 之后定义了 getUpperGroups,因此您无法将其添加到 useEffect 依赖项列表中。
2- 如果您将 getUpperGroups 添加到 useEffect 依赖项列表中,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- 禁用 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);
}
这个对我有用。
只需在 useEffect 的最后一行添加此注释:
//eslint-disable-next-line
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
//eslint-disable-next-line
}, [contentGroupData]);
可能我会尝试将getUpperGroups
的定义移动到useEffect
。 您也可以使用.map()
和groups
状态的先前状态。
尝试如下:
useEffect(() => {
const getUpperGroups = () => {
setUpperGroups(prevUpperGroups => contentGroupData.map((content) => ({
...prevUpperGroups,
[content.id]: content.title
})))
}
getUpperGroups();
setContentData(contentGroupData);
}, [contentGroupData]);
只需添加getUpperGroups
到DEPS阵列useEffect
useEffect(() => {
getUpperGroups();
setContentData(contentGroupData);
}, [contentGroupData, getUpperGroups]);
但最好将代码本身移动到useEffect
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.