javascript - 从 fetch 中传递 Props

Question

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

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() {
  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。