在 React Router 中使用带有 props 的上下文

Question

我有一个应用程序正在跟踪有关各种服务器的信息。我有一个 Web 服务器，我可以通过服务器名称查询信息。我为此信息创建了一个上下文，它以服务器名称作为道具并定期更新其数据。见下文；

ServerContext.js

export const ServerDataContext = createContext();

export const ServerDataContextProvider = ({
  children,
  server= "",
}) => {
  const [serverConfig, setServerConfig] = useState({});

  const updateServerData = () => {;
    serverConfigRequest(server).then((res) => {
      setServerConfig((old) => {
        return res;
      });
    });
  };

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

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

  return (
    <ServerDataContext.Provider
      value={{
        serverConfig,
      }}
    >
      {children}
    </ServerDataContext.Provider>
  );
};

在我的 App.js 中，我使用 react router to 为每个服务器设置一个 StatusPage。它看起来像这样：

App.js

function App() {
  return (
    <Router>
      <div className="app">
        <Header />
        <Routes>
          <Route exact path="/" element={<div>Overview</div>} />
          <Route
            exact
            path="/server_1"
            element={
              <ServerDataContextProvider server="server_1">
                <StatusPage server="server_1" />
              </ServerDataContextProvider>
            }
          />
          <Route
            exact
            path="/server_2"
            element={
              <ServerDataContextProvider server="server_2">
                <StatusPage server="server_2" />
              </ServerDataContextProvider>
            }
          />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

我有按钮可以转到标题中的每个页面。当我加载第一个服务器状态页面时，页面更新得非常好。我看到服务器上的请求以正确的时间间隔传入 server_1。然后我导航到 server_2 我在浏览器搜索栏中看到路由更新，但页面上的内容没有。我在我的网络服务器上收到的请求仍然以相同的时间间隔针对 server_1，就好像我没有切换页面一样。如果我仍然在 server_2 的端点刷新页面，则页面上的内容将为 server_2 正确更新，但这次 server_1 也会出现同样的问题。

我是否不恰当地使用上下文？我认为问题在于我如何构建应用程序但不确定。任何建议表示赞赏。

编辑： https://codesandbox.io/s/admiring-haibt-vxm62?file=/src/ServerContext.js

Answer 1

我怀疑这里发生的情况是，当路由路径切换时，React 树实际上是相同的，并且没有安装服务器 2 的上下文提供程序。 我当然没有看到它安装，即使安装了useEffect，并且仍在提供服务器 1 上下文值。

在App 中为每个提供者添加一个 React 键确实可以解决问题，并通知 React 这实际上是两个不同的组件，它必须使用给定的 props 重新安装提供者并重新实例化上下文值。

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

或者，将server 属性添加为ServerDataContextProvider 的useEffect 挂钩中的依赖项也将清除任何现有的间隔计时器并使用更新的server 属性值重新启动它们。

useEffect(() => {
  // moved into effect callback to remove as dependency
  const updateServerData = () => {
    setServerConfig((old) => {
      return { server: server == "server_1" ? "G" : "R" };
    });
  };

  console.log("init");
  updateServerData();
  const updateInterval = setInterval(updateServerData, 5 * 1000);

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