useEffect的死循环问题？

Question

一个分页的列表

const [pagination, setPagination] = useState({
    total:0,
    current: 1, 
    pageSize: 20,
    quickJump: true,
});

useEffect(()=>{
    queryList({current: pagination.current, pageSize: pagination.pageSize})
    .then((res)=>{
        setPagination({
            ...pagination,
            total: res.total,
            current: res.current,
        })
    })
}, [pagination]);

这里useEffect中用到了pagination，所以需要依赖pagination，但是每次setpagination都是新对象，导致这个useEffect会死循环，这里有没有优雅的解决方式？

Answer 1

首先确定影响数据更新的依赖：pagination.current, pagination.pageSize，然后将其作为 useEffect 的依赖项，同时通过 setState 的函数式更新方式获取之前的状态 prevPagination 去更新状态，从而避免依赖 pagination 造成死循环。
代码如下，希望可以帮助到您：

const [pagination, setPagination] = useState({
    total:0,
    current: 1, 
    pageSize: 20,
    quickJump: true,
});

useEffect(()=>{
    queryList({current: pagination.current, pageSize: pagination.pageSize})
    .then((res)=>{
        setPagination((prevPagination) => {
            ...prevPagination,
            total: res.total,
            current: res.current,
        })
    })
}, [pagination.current, pagination.pageSize]);

Answer 2

业务目的是，每次获取当前页的数据，然后同时更新pagination数据对吧，那你发起请求只依赖pageination.current就行了。然后点击页数的地方去更新这个current

useEffect(() => {...}, [pagination.current])