React 条件渲染 - 加载组件

Question

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

我感到困惑的是，我正在映射数据以显示我的故事。在该地图（下）中，我是否添加三元运算符来呈现 `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>
  );
}

Answer 1

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