React 条件渲染 - 加载组件

问题描述

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

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

解决方法

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