React路由跳转URL变更但UI需刷新页面才更新的问题

云原生阿岚

2026-8-26

问题根因

路由从/users/1跳转到/users/2时，React Router判定二者匹配的是同个路由组件，会直接复用已经挂载的User组件实例，不会触发组件的重挂载流程。你代码里所有数据拉取、事件绑定相关的useEffect都传了空依赖数组[]，这类副作用只会在组件第一次挂载时执行一次，路由参数变化后完全不会重新触发，自然不会拉取新用户的数据更新UI，只有手动刷新页面触发组件全量重挂时，才会拿到新参数对应的数据。
跳转路由后没有重置本地状态，旧的用户信息、好友列表、分页页码、加载状态会一直残留在组件状态中，就算后续触发数据拉取，也容易出现新旧数据混杂的问题。
好友拉取、滚动加载逻辑直接读取闭包中缓存的旧params.id、page、items值，就算逻辑触发，拉取的也是旧用户的接口数据，还会出现列表拼接错误、页码错乱的问题。

修复方案

按以下步骤调整代码即可：

改造单用户信息拉取逻辑，监听路由参数变化，切用户时自动重置状态、拉取新数据

const params = useParams();
const [users, setUsers] = useState();
const [items, setItems] = useState([]);
const [isFetching, setIsFetching] = useState(false);
const [page, setPage] = useState(1);

// 拉取单个用户信息，依赖params.id
useEffect(()=>{
  // 切用户时先重置所有状态，避免旧数据闪屏
  setUsers(undefined);
  setItems([]);
  setPage(1);
  setIsFetching(false);
  // 切用户后回到页面顶部，优化体验
  window.scrollTo(0, 0);

  async function fetchData(){
    const res = await axios(`http://sweeftdigital-intern.eu-central-1.elasticbeanstalk.com/user/${params.id}`);
    setUsers(res.data);
  }
  fetchData()
},[params.id]);

改造首屏好友拉取、滚动监听逻辑，切用户时重新拉取好友列表、绑定滚动事件，避免旧监听泄漏

// 首屏好友拉取 + 滚动事件绑定，依赖params.id
useEffect(()=>{
  // 拉取当前用户第一页好友
  const url =  `http://sweeftdigital-intern.eu-central-1.elasticbeanstalk.com/user/${params.id}/friends/1/20`;
  axios.get(url).then((res) => {
    setItems(res.data.list);
  });

  const handleScroll =()=>{
    if(window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight){
      return;
    }
    setIsFetching(true)
  }

  window.addEventListener("scroll", handleScroll);
  // 组件卸载、切用户时移除旧的滚动监听
  return () => window.removeEventListener("scroll", handleScroll);
},[params.id]);

改造滚动加载更多逻辑，用函数式状态更新规避闭包陷阱，保证读取到最新的页码和列表数据

const moreData = () => {
  setPage(prevPage => {
    const targetPage = prevPage + 1;
    const url = `http://sweeftdigital-intern.eu-central-1.elasticbeanstalk.com/user/${params.id}/friends/${targetPage}/20`;
    
    axios.get(url).then(res => {
      setItems(prevItems => [...prevItems, ...res.data.list]);
      setIsFetching(false)
    });
    return targetPage;
  })
}

// 监听加载状态触发拉取，同时依赖params.id避免切用户时误触发
useEffect(() => {
  if(!isFetching) return;
  moreData();
}, [isFetching, params.id]);

调整列表渲染的key值，不要用数组索引当key，避免动态追加列表时出现组件复用错误

// 原来的key={key}替换为key={user.id}
{items.map((user) => (
  <Card key={user.id} id={user.id} prefix={user.prefix} name={user.name} lastName={user.lastName} image={user.imageUrl} job={user.title}/>
))}

额外建议

所有axios请求最好补充.catch()错误处理逻辑，接口请求失败时给用户明确提示，不要静默失败。
可以给滚动事件加节流处理，避免滚动时频繁触发判断逻辑，减少性能损耗。

内容的提问来源于stack exchange，提问作者ceaiius