在数据加载之前不要渲染 - 反应[关闭]

Posted 2023-02-22

【中文标题】在数据加载之前不要渲染 - 反应[关闭]

【英文标题】：Dont render until data has loaded - react [closed]

【发布时间】：2019-12-31 16:48:42

【问题描述】：

我正在使用 react-router 进行导航。我希望路线之间的过渡就像 youtube 和 facebook 一样。我在挂载的每个组件中都有 API 调用。我试图阻止下一个 url（组件）加载，直到它获取数据（如 youtube）。相反，我想要的是当前组件在顶部进度条中保持可见，直到下一个 url(component) 完成获取其数据。我怎样才能在反应中做到这一点？谢谢

【问题讨论】：

这有点模糊。你已经写好代码了吗？你已经有你的进度条了吗？您是在问如何渲染它或如何设置它的样式？与特定问题共享代码是让您的问题得到解答的更好方法。

我不是因为我有点失落

【参考方案1】：

您需要在父组件中进行提取。然后，您可以根据 fetch 的状态呈现您想要的任何组件。如果获取完成，则渲染 NewComponent。如果仍在获取，则渲染 CurrentComponent。

import React,  useState  from "react";
import ReactDOM from "react-dom";

const CurrentComponent = () => <div>I am current</div>;
const NewComponent = () => <div>I am new</div>;

const App = () => 
  const [loading, setLoading] = useState(true);

  // this simulates your fetch
  setTimeout(() => 
    setLoading(false);
  , 2000);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Component:</h2>
      loading ? <CurrentComponent /> : <NewComponent />
    </div>
  );
;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

或者使用 React-Router：

进行抓取，完成抓取后使用history.push 转到您的新路线。见this post。

【讨论】：

hmmm....好吧，我正在尽力理解这一点

我添加了一个更好的例子

非常感谢，我正在使用 React 路由器。无论如何这可以与反应路由器集成

对不起，我错过了那部分。请参阅帖子的链接。 ***.com/a/42716055/9211387