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

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 ，我如何触发Header （父）的重新渲染，后者又调用Content.js或ViewResults.js ，以便在 Header 中创建useEffect .js 刷新数据，从 REST api 获取并再次在标题中显示最新温度？

理想情况下，无论何时呈现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