React Router搭配接收props的Context使用时路由切换数据不更新求助

问题根因 #

• ServerDataContextProvider中的useEffect依赖数组为空，仅会在组件首次挂载时执行一次，内部捕获的server prop永远是初始值。
• React路由切换时默认会复用同类型组件实例，两个路由下的ServerDataContextProvider属于同一组件，切换路由时组件不会重新挂载，仅会更新prop，因此旧定时器不会被清除，还是用第一次的server值发请求。

解决方案1：给Provider添加唯一key（快速适配） #

在路由配置里给每个ServerDataContextProvider加上和server值绑定的key属性，强制React切换路由时销毁旧实例、创建新实例，旧定时器会自动执行清理逻辑：

<Route
  exact
  path="/server_1"
  element={
    <ServerDataContextProvider server="server_1" key="server_1">
      <StatusPage server="server_1" />
    </ServerDataContextProvider>
  }
/>
<Route
  exact
  path="/server_2"
  element={
    <ServerDataContextProvider server="server_2" key="server_2">
      <StatusPage server="server_2" />
    </ServerDataContextProvider>
  }
/>

解决方案2：补全useEffect依赖（更推荐） #

修改ServerContext.js里的useEffect，把server加到依赖数组中，每次server变化时自动清除旧定时器，用新值重新初始化请求逻辑，适配prop动态更新的场景：

useEffect(() => {
  console.log("init");
  updateServerData();
  const updateInterval = setInterval(
    updateServerData,
    serverConfigUpdateFrequency * 1000
  );

  return () => {
    clearInterval(updateInterval);
  };
}, [server]);

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