从获取中传递道具

Question

假设我有一个带有NavBar组件的app.js，该组件具有链接到每个页面路径的链接。

function App() {
  return (
    <div className="App">
      <Router history={history}>
        <header>
          <NavBar />
        </header>
        <div>
        <Switch>
          <Route path="/" exact component={Home}/>
          <Route path="/profile" component={Profile} />
          <Route path="/contacts" component={Contacts} />
        </Switch>
        </div>
      </Router>
    </div>
  );
}

export default App;

我的家庭组件将进行获取以获取我需要的家庭，联系人和个人资料组件的详细信息，如下所示：

import React, { useEffect, useState } from "react";


function Home(props) {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    async function getView() {
      setIsLoading(true);
      const response = await fetch("https://personalapi.amazonaws.com/default/getview", {
       method: "POST", 
       headers: {
          "Content-Type": "application/json"
        },
        data: {
          data: "ti"
        }
      });
      setData(data);
      setIsLoading(false);
    }
    getView();
    // eslint-disable-next-line
  },[]);

  return (
    isLoading ? <div> Loading...</div> :
    <div>
     // put some of the data object here. 
    </div>
  );
};


export default Home;

我将如何使数据对象的其他部分传递给我的其他组件（联系人，个人资料）。我是React Router的新手，所以我不确定它是如何工作的，但是我越来越不喜欢React Hooks。任何指导或方向对此将不胜感激！

Answer 1

您有正确的想法，但基本上，我认为只是将获取的内容移至应用程序级别。假设您要在应用程序的整个生命周期中保留这些数据，请在App.js中对其进行调用，然后根据需要将这些信息通过props传递给每个子组件。

或者，如果这是一个过于简化的示例，但是您打算在不一定嵌套在App.js中的许多组件之间共享它，则可能需要研究一个状态管理框架。一些例子可能是redux或mobx。