React 条件渲染 - 加载组件

Posted 2023-02-22

【中文标题】React 条件渲染 - 加载组件

【英文标题】：React Conditional Rendering - Loading Component

【发布时间】：2021-05-26 10:02:32

【问题描述】：

我试图在导航项之间切换时调用我的加载组件。每次点击它都会获取新数据，所以我想在等待数据加载时将我的加载组件放在那里。

我感到困惑的是，我正在映射数据以显示我的故事。在该地图（下）中，我是否添加三元运算符来呈现 `Loading/> 组件？这就是我迷路的地方。我试图关注this post。

import  useState, useEffect  from "react";
import Story from "./Story";
import  useParams  from "react-router-dom";
import Masthead from "./Masthead";
import LoadingBar from "./LoadingBar";

export default function News() 
  const  section  = useParams();
  console.log("Section: ", section);

  const [error, setError] = useState(null);
  const [results, setResults] = useState(null);

  useEffect(() => 
    fetch(
      `https://api.nytimes.com/svc/topstories/v2/$section.json?api-key=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr`
    )
      .then((res) => res.json())
      .then((data) => 
        setTimeout(() => setResults(data.results), 1500);
        console.log("Success ", data);
      )
      .catch((error) => 
        console.log("Error", error);
        setError(error);
      );
  , [section]);

  if (error) 
    return <div>Error: error.message</div>;
   else if (!results) 
    return <LoadingBar type="cylon" color="#193152" />; // this Loading bar is called when first fetching data, but doesn't re-rending when refetching new data
   else 
    return (
      <>
        <Masthead />
        <ul className="stories">
          results.map((story, index) => (        // Do I add the ternary operator here?
            <Story                             
              key=index
              title=story.title
              abstract=story.abstract
              img=story.multimedia[0].url
              alt=story.multimedia[0].caption
              link=story.url
            />
          ))
        </ul>
      </>
    );
  

我的带路由器的 App.js

import  BrowserRouter as Router, Route  from "react-router-dom";
import Masthead from "./components/Masthead";
import News from "./components/News";
import Header from "./components/Header";
import "./App.css";

export default function App() 
  return (
    <>
      <Header title="The React Times" />
      <Router>
        <Route path="/" exact component=Masthead />
        <Route path="/news/:section" exact component=News />
      </Router>
    </>
  );

还有我拥有导航项目的标头部分

import React from "react";
import  NavLink  from "react-router-dom";

var sections = [
  "arts",
  "business",
  "health",
  "home",
  "movies",
  "opinion",
  "politics",
  "science",
  "sports",
  "technology",
];

export default function Masthead() 
  return (
    <div className="masthead">
      <ul>
        sections.map((section) => 
          return (
            <li key=section>
              <NavLink classname="navItem" to=`/news/$section`>
                section
              </NavLink>
            </li>
          );
        )
      </ul>
    </div>
  );

【参考方案1】：

我认为您的问题是，只要结果不正确，您就会显示 Loading Bar 组件。但是，在进行 fetch 之前，您不会将结果设置为 null，因此它仍会保留上次 fetch 的内容，并且 Loading Bar 将永远不会再次呈现。

【讨论】：

作为此解释的后续建议，从用户体验的角度来看，在下一个故事仍在加载时删除所有故事有点不和谐。我建议不要将结果设置为 null，而是添加一个 isLoading 状态，它可以显示下一个故事正在加载的某些状态，同时仍将当前故事保留在屏幕上。

当您说“某种状态”时，您在视觉上是什么意思？大多数网站都使用加载微调器等。我在加载组件中使用加载栏

正如@PatrickRoberts 所提到的，看到您的列表突然消失并被“加载”消息所取代并且新内容突然出现在视觉上并不吸引人。我通常做的是使用isLoading 类型的状态，这将触发显示加载消息的叠加层的可见性。在背景中，将是现有内容的“软化”图像。然后我加入了一些过渡效果，这样就不会觉得太刺耳了。