Next.js同组件路由跳转时无法重置组件状态的问题求助

这个问题我之前踩过坑！核心原因是Next.js在同组件的路由跳转时会复用组件实例，不会重新初始化组件的state——也就是说，当你从Search页面本身跳转到新的搜索路由时，skip、limit这些状态还保留着之前的值；但从其他页面跳过来时，组件是全新挂载的，所以状态会自动重置，刷新页面同理（因为刷新会重新挂载组件）。

给你几个具体的修改方案，一步步来：

1. 修改useEffect的依赖项，监听搜索关键词的变化 #

你现在的useEffect依赖的是data（来自getServerSideProps的props），但同组件跳转时，即使data更新了，组件的state不会自动重置。我们需要把触发点改成路由参数里的搜索关键词，也就是router.query.search：

useEffect(() => {
  getSearchedData();
  console.log("搜索关键词变化，触发数据刷新");
}, [router.query.search]); // 把依赖从[data]改成router.query.search

2. 重置状态时使用函数式更新，避免依赖旧state #

你的getSearchedData里直接用values来更新状态，可能会拿到旧的state值。改成函数式更新，确保每次都基于最新的状态来修改：

const getSearchedData = async () => {
  const search = router.query.search;
  if (!search) return;

  // 第一步：重置skip、limit、hasMore到初始值
  setValues(prevState => ({
    ...prevState,
    skip: 0,
    limit: 5,
    hasMore: true
  }));

  try {
    // 用重置后的skip和limit请求新数据
    const data = await searchData(search, 0, 5);
    if (data.error) {
      console.log(data.error);
    } else {
      setValues(prevState => ({
        ...prevState,
        pages: data,
        skip: 0
      }));
    }
  } catch (error) {
    console.error("搜索请求出错：", error);
  }
};

3. 额外优化：处理路由参数的空值情况 #

如果路由里没有search参数（比如直接访问/search），可以提前做个判断，避免无效请求，这个你已经在getServerSideProps里处理了，组件里也可以再加一层防护。

为什么这样改？ #

• 当你在Search页面点击搜索新关键词时，router.query.search会变化，触发useEffect执行
• 在getSearchedData里先手动重置状态，再请求新的搜索数据，这样就能保证每次新搜索都是从skip=0开始
• 函数式更新setValues(prev => ...)可以避免闭包陷阱，确保拿到最新的状态值

这样修改后，不管是从其他页面跳转到搜索页，还是在搜索页内更换关键词，状态都会正确重置，不需要刷新页面就能看到正确的搜索结果啦！

备注：内容来源于stack exchange，提问作者Rohan Srivastava