useEffect的死循环问题?

唯见长江天际流
  • 683
北京市

一个分页的列表

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会死循环,这里有没有优雅的解决方式?

回复
阅读 612
2 个回答
✓ 已被采纳

首先确定影响数据更新的依赖: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]);

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

useEffect(() => {...}, [pagination.current])
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进