useEffect cause循环中的连接状态

Question

我读过一些关于这个问题的问题和文章，包括这个:但是我没有找到我的答案。

考虑以下代码:

function Component({ page }) {

const [list, setList] = useState([]);

useEffect(() => {

axios.get([url] + page).then(newList => {
setList([...list, ...newList]);
});

}, [page, list]);

return ['some jsx for map though list'];
};

我有一个分页，每次我转到下一页时，我需要将数据与前一页连接起来，这是交易。

• react抱怨list和page的依赖数组

• 我同意page，因为每次它改变我需要获取更多的数据。但是当我将list添加到依赖数组useEffect时，发现list的变化并获取更多数据，从而导致无限循环。

我知道钩子，但我想知道解决这个问题的最佳实践是什么。

Answer 1

您的列表在每次page或list依赖项更新时更新，导致无限循环。从依赖数组中删除list参数将修复您的错误。

事实上，如果你像blow那样在setState中使用callback, eslint永远不会抱怨依赖数组中的list。所以你可以安全地从useEffect依赖数组中删除列表。

在useEffect中，您根本不需要list。

useEffect(() => {

axios.get([url] + page).then(newList => {
setList(prev => [...prev, ...newList]);
});

}, [page]);

由于该方法是在该组件中定义的，因此您甚至不需要useCallback钩子来记忆该函数。eslint也不会抛出警告