react常见bug - 查询条件变化,但page未重置为1

问题1.多次触发请求,且存在潜在的竞态问题

复制代码
const [page, setPage] = useState(1);
const [keyword, setKeyword] = useState('');

useEffect(() => {
  // do request
}, [page, keyword]);

useEffect(() => {
 setPage(1);
}, [keyword]);
复制代码

问题2.查询条件变化,但page未重置为1

const [page, setPage] = useState(1);
const [keyword, setKeyword] = useState('');

useEffect(() => {
  // do request
}, [page, keyword]);

以上问题的改进方法:推荐使用第三方库:https://ahooks.js.org/zh-CN/hooks/use-pagination

复制代码
import { usePagination } from 'ahooks';

const [keyword, setKeyword] = useState('');
const { data, loading, pagination } = usePagination(
    ({ current, pageSize }) => {
      return requestXXX();
    {
      refreshDeps: [keyword],
    },
);
复制代码

 

posted @   行走的蒲公英  阅读(69)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示