子组件渲染时触发父组件的重新渲染

Question

我正在使用以下 material-ui 主题 Paperbase 并在 Header.js 组件中，我有以下 useEffect 钩子：

const [temperature, setTemperature] = useState([]);

  const getTemperature= async () => {
    try {

      const response = await fetch('/get-temperature')
      const tempData = await response.json();

      setTemperature(tempData);
    } catch (err) {
      console.error(err.message);
    }
  };

useEffect(() => {
    getTemperature();
}, []);  

这样做的主要目的是将当前温度显示为信息，在标题组件中，该组件在第一页加载/渲染时显示。

现在在下面的 App.js 中，我有以下 return 设置，其中调用了上述 Header 组件。

return (
    <Router>
      <UserProvider myinfo={myinfo}>
        <Switch>
          <Route path="/">
              <ThemeProvider theme={theme}>
                <div className={classes.root}>
                  <CssBaseline />
                  <nav className={classes.drawer}>
                    <Hidden xsDown implementation="css">
                      <Navigator />
                    </Hidden>
                  </nav>
                  <div className={classes.app}>
                    <Header
                      onDrawerToggle={handleDrawerToggle}
                    />
                    <main className={classes.main}>
                      <Switch>
                        <Route exact path="/new-user"
                          render={(props) => <Content key={props.location.key} />}
                        />
                        <Route exact path="/view-results"
                          render={(props) => <ViewResults key={props.location.key} />}
                        />
                      </Switch>
                    </main>
                  </div>
                </div>
              </ThemeProvider>
          </Route>
        </Switch>
      </UserProvider>
    </Router>
);

我的问题是，当用户路由到 /new-user 或 /view-results 进而调用 Content.js 或 ViewResults.js 时，我如何触发 Header（父级）的重新渲染，以便使Header.js 中的useEffect 刷新数据，从 REST api 获取并再次在 header 中显示最新的温度？

理想情况下，无论何时呈现 Content.js 或 ViewResults.js，请确保调用 Header.js getTemperature()。

任何帮助将不胜感激。

Answer 1

您当前的代码非常接近多布局系统。作为Route 的子组件，您可以通过useLocation() 甚至原生的window.location.pathname 访问当前位置。

这是我的多布局 React 应用示例。您可以尝试使用它来适应您的代码。

MainLayout 在未指定 path 时使用回退路由。它还包含一个Header 并包含一个页面

const Dispatcher = () => {
    const history = useHistory();

    history.push('/home');

    return null;
};

const App = () => (
    <BrowserRouter>
        <Switch>
            <Route
                component={Dispatcher}
                exact
                path="/"
            />

            <Route
                exact
                path="/login/:path?"
            >
                <LoginLayout>
                    <Switch>
                        <Route
                            component={LoginPage}
                            path="/login"
                        />
                    </Switch>
                </LoginLayout>
            </Route>

            <Route>
                <MainLayout>
                    <Switch>
                        <Route
                            component={HomePage}
                            path="/home"
                        />
                    </Switch>
                </MainLayout>
            </Route>
        </Switch>
    </BrowserRouter>
);

这是MainLayout的代码

const MainLayout = ({ children }) => (
    <Container
        disableGutters
        maxWidth={false}
    >
        <Header location={props.location} />

        <Container
            component="main"
            maxWidth={false}
            sx={styles.main}
        >
            {children}
        </Container>

        <Footer />
    </Container>
);

现在Header 可以是任何东西。您需要在此组件中放置一个捕获

import { useLocation } from 'react-router-dom'

cont Header = (props) => {
  const { pathname } = useLocation();
  
  //alternatively you can access props.location
  
  useEffect(() => {
    if (pathname === '/new-user') {
      getTemperature();
    }
  }, [pathname]);  
};

请注意，Header 不是Route 的直接后代，因此它不能通过props 直接访问该位置。你需要链式转账

Route -> MainLayout -> Header

或者更好地使用useLocation