使用React 16.8.6(在之前的版本16.8.3上很好)，当我试图阻止fetch请求上的无限循环时，我得到了这个错误:
./src/components/BusinessesList.js
Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array react-hooks/exhaustive-deps
我一直无法找到一个解决办法来停止这个无限循环。我想远离使用useReducer()。我确实找到了关于'筋疲力尽-deps' lint规则#14920的讨论[ESLint]反馈，其中一个可能的解决方案是，如果你认为你知道你在做什么，你可以总是// ESLint - disabled -next-line react-hooks/详尽-deps。我对我正在做的事情没有信心，所以我还没有尝试实现它。
我有这个当前的设置，React钩子useEffect连续运行永远/无限循环，唯一的评论是关于useCallback()，我不熟悉。
我目前如何使用useEffect()(我只想在开始时运行一次，类似componentDidMount()):
useEffect(() => {
fetchBusinesses();
}, []);
const fetchBusinesses = () => {
return fetch("theURL", {method: "GET"}
)
.then(res => normalizeResponseErrors(res))
.then(res => {
return res.json();
})
.then(rcvdBusinesses => {
// some stuff
})
.catch(err => {
// some error handling
});
};
你可以这样尝试:
const fetchBusinesses = () => {
return fetch("theURL", {method: "GET"})
.then(res => normalizeResponseErrors(res))
.then(res => {
return res.json();
})
.then(rcvdBusinesses => {
// Some stuff
})
.catch(err => {
// Some error handling
});
};
and
useEffect(() => {
fetchBusinesses();
});
这对你有用。
但我的建议是试试这种方法，它也适用于你。
这比以前的方法好。我是这样用的:
useEffect(() => {
const fetchBusinesses = () => {
return fetch("theURL", {method: "GET"})
.then(res => normalizeResponseErrors(res))
.then(res => {
return res.json();
})
.then(rcvdBusinesses => {
// Some stuff
})
.catch(err => {
// Some error handling
});
};
fetchBusinesses();
}, []);
如果您根据特定的id获取数据，则在回调中添加useEffect [id]。然后它就不能显示警告
React钩子useEffect有一个缺失的依赖:'any thing'。要么包含它，要么删除依赖数组
实际上，在使用钩子进行开发时，警告非常有用。但在某些情况下，它会刺痛你。特别是当您不需要监听依赖项更改时。
如果你不想将fetchBusinesses放在钩子的依赖项中，你可以简单地将它作为参数传递给钩子的回调函数，并将fetchBusinesses设置为它的默认值，如下所示:
useEffect((fetchBusinesses = fetchBusinesses) => {
fetchBusinesses();
}, []);
这不是最佳实践，但在某些情况下可能有用。
同样，正如Shubham所写的，你可以添加下面的代码来告诉ESLint忽略钩子的检查。
// eslint-disable-next-line react-hooks/exhaustive-deps
在我的例子中，它对我的局部变量组织有这个警告，当我把组织放在依赖数组中时，useEffect将获取无限。因此，如果你有一些像我这样的问题，使用useEffect和依赖数组并拆分:
因为如果您有多个修改状态的API调用，它会多次调用useEffect。
来自:
const { organization } = useSelector(withOrganization)
const dispatch = useDispatch()
useEffect(() => {
dispatch(getOrganization({}))
dispatch(getSettings({}))
dispatch(getMembers({}))
}, [dispatch, organization])
To:
const { organization } = useSelector(withOrganization)
const dispatch = useDispatch()
useEffect(() => {
dispatch(getOrganization({}))
dispatch(getSettings({}))
}, [dispatch, organization])
useEffect(() => {
dispatch(getMembers({}))
}, [dispatch])
React也给出了解决方案。他们建议你使用useCallback，它会返回你函数的一个内存版本:
'fetchBusinesses'函数使useEffect钩子(在NN行)的依赖关系在每次渲染时发生变化。为了解决这个问题，将'fetchBusinesses'定义包装到它自己的useCallback() Hook react-hooks/竭-deps中
useCallback使用起来很简单，因为它与useEffect具有相同的签名。区别在于useCallback返回一个函数。
它看起来是这样的:
const fetchBusinesses = useCallback( () => {
return fetch("theURL", {method: "GET"}
)
.then(() => { /* Some stuff */ })
.catch(() => { /* Some error handling */ })
}, [/* deps */])
// We have a first effect that uses fetchBusinesses
useEffect(() => {
// Do things and then fetchBusinesses
fetchBusinesses();
}, [fetchBusinesses]);
// We can have many effects that use fetchBusinesses
useEffect(() => {
// Do other things and then fetchBusinesses
fetchBusinesses();
}, [fetchBusinesses]);
