javascript - 完成加载后如何确定从 REST API 接收数据的数组是否正在加载？在 React 中使用该数据

Question

在具有反应的 Web 应用程序中，我使用两个 Rest API，我使用上下文管理其数据以便能够将它们传递给任何组件，但是在第一次加载时它返回 10 个空数组，然后 10 个填充了它需要但仅需要一个数组，这大大降低了性能，因为有很多 innsesary 负载

我到达的解决方案是传递上下文 index.js 以便稍后在 app.jsx 中进行调用时进行调用，如果数组为空，它将返回一个微调器，但如果整个应用程序已满并且有用

在具有反应的 Web 应用程序中，我使用两个 Rest API，我使用上下文管理其数据以便能够将它们传递给任何组件，但是在第一次加载时它返回 10 个空数组，然后 10 个填充了它需要但仅需要一个数组，这大大降低了性能，因为有很多 innsesary 负载

我到达的解决方案是传递上下文 index.js 以便稍后在 app.jsx 中进行调用时进行调用，如果数组为空，它将返回一个微调器，但如果整个应用程序已满并且有用

但我的上级告诉我，这是正确的做法，但不是正确的方法。

调用休息 api

import React, { createContext, useEffect, useState } from "react";
import axios from "axios";
export const ViewContext = createContext();
const RestView = (props) => {
  const urlRestApi = "";
  const urlImage = "";

  const [arrRest, setArrRest] = useState([]);

  useEffect(() => {
    function loadPosts() {
      try {
        axios.get(`${urlRestApi}`)
          .then((post) => {
            const posts = post.data.map((data) => ({
              titulo: data.title.rendered,
              contenido: data.content.rendered, 
              extracto: data.excerpt.rendered,
              idImagen: data.featured_media,
            }));
            const imagePostPromises = posts.map((post) => {
              return axios.get(`${urlImage}/${post.idImagen}`) 
                .then((imageData) => ({
                  ...post,
                  imagenes: imageData.data.source_url, 
                }));
            });
            return axios.all(imagePostPromises);
          })
          .then((postsWithImages) => {
            console.log(postsWithImages); 
            setArrRest(postsWithImages);
          });
      } catch (e) {
        console.log("error");
        console.log(e);
      }
    }
    loadPosts();
  }, []);
  return (
    <ViewContext.Provider
      value={{
        arrRest,
      }}
    >
      {props.children}
    </ViewContext.Provider>
  );
};

export default RestView;

恩 app.jsx

import React, { Fragment, useContext } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import Container from "@material-ui/core/Container";
import "fontsource-roboto";
import Fade from 'react-reveal/Fade';
import Slide from 'react-reveal/Slide';
import NavBar from "./components/NavBar";
import Featured from "./components/Featured";
import Footer from "./components/Footer";
import Blog from "./pages/Blog";
import BlogOne from "./pages/BlogOne";
import BlogTwo from "./pages/BlogTwo";
import BlogThree from "./pages/BlogThree";
import PageError from "./pages/PageError";
import "./App.css";
import { ViewContext } from "./components/Context/ContexPost";
function App() {
  const { arrRest } = useContext(ViewContext);
  console.log("EN APP", arrRest);

  if(arrRest.length === 0)
    return (
      <div>
        <div className="sk-fading-circle">
          <div className="sk-circle1 sk-circle"></div>
          <div className="sk-circle2 sk-circle"></div>
          <div className="sk-circle3 sk-circle"></div>
          <div className="sk-circle4 sk-circle"></div>
          <div className="sk-circle5 sk-circle"></div>
          <div className="sk-circle6 sk-circle"></div>
          <div className="sk-circle7 sk-circle"></div>
          <div className="sk-circle8 sk-circle"></div>
          <div className="sk-circle9 sk-circle"></div>
          <div className="sk-circle10 sk-circle"></div>
          <div className="sk-circle11 sk-circle"></div>
          <div className="sk-circle12 sk-circle"></div>
        </div>
      </div>
    );
  
   
    return (
      <Fragment>
        <CssBaseline />
        <Fade left>
        <NavBar />
        </Fade>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Blog} />
            <Route exact path="/blog1" component={BlogOne} />
            <Route exact path="/blog2" component={BlogTwo} />
            <Route exact path="/blog3" component={BlogThree} />
            <Route component={PageError} />
          </Switch>
        </BrowserRouter>
        <Slide right>
        <Container maxWidth="lg">
          <main>
            <Featured />
          </main>
        </Container>
        </Slide>
        <Slide right>
        <Footer />
        </Slide>
      </Fragment>
    );
}

export default App;

但是我的上级告诉我这是正确的方法但不是正确的方法，我不应该使用 if (array.length === 0) 因为我要做的是检查它是否正在加载元素以及何时加载完成加载，从没有元素到有不同的东西时我所做的

如何检查数组何时加载到何时完成加载？

不，我的上级不会告诉我怎么做，这就像一种测试，以防万一

标签： javascriptarraysreactjs