Проблема со временем, когда я нахожусь в моем следующем js проекте - PullRequest
Новая
       38

Проблема со временем, когда я нахожусь в моем следующем js проекте

0 голосов
/ 21 марта 2020

У меня есть сомнения в моем следующем js проекте.

Я добавил новый маршрут в вызовы моего заголовка /files, и я не знаю, почему загрузка данных занимает много времени, когда я хочу вернуться домой.

Я утешаю запрос. Я дважды замечаю обращения к моему API и моему INDEX, но я не уверен, что это проблема.

Конечная точка с данными немного медленно, но я полагаю, что если я вызову их внутри моего pages/index getInitialProps, данные, которые они загружаются на сервер в начале, я прав? и если я прав, почему мне так долго показывать данные?

Вот мой код!

Заголовок 

import React, { Component } from "react";

class Header extends Component {

  render() {
    return (
      <>
        <Navbar collapseOnSelect expand="lg" bg="light" variant="light">
            <Navbar.Toggle
              aria-controls="responsive-navbar-nav"
              style={{ outline: "0", display: 'none' }}
            />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="mr-auto"></Nav>
              <Nav>
                <Link href="/" passHref>
                  <Nav.Link>
                    Home
                  </Nav.Link>
                </Link>
                <Link href="/files" passHref>
                  <Nav.Link>
                    Files
                  </Nav.Link>
                </Link>
              </Nav>
            </Navbar.Collapse>
        </Navbar>
      </>
    );
  }
}

export default Header;

страниц / индекс 

import React, { useState, useEffect } from "react";

/* Others */
import Error from "./_error";
import { getDataLatestEvents } from "../helper/api";

/* Components */
import MyComponent from "../components/MyComponent";

/* Bootstrap Components */
import Row from "react-bootstrap/Row";


const Index = props => {
  console.log('index*************')
  const [contentData, setData] = useState([]);
  const res = props.data.data.data;  

  useEffect(() => {
    setData(res);
  }, [props]);

  if (props.statusCode !== 200) {
    return <Error statusCode={props.statusCode} />;
  }

  return (
    <>
      <Row>
        <StyledContainer>
          <MyComponent
            data={contentData}
          />
        </StyledContainer>
      </Row>
    </>
  );
};

Index.getInitialProps = async ({ res }) => {
  try {
    let req = await getDataLatestEvents();
    return { data: req, statusCode: 200 };
  } catch (e) {
    res.statusCode = 503;
    console.log(`error /pages/index: ${e}`);
    return { data: null, statusCode: 503 };
  }
};

export default Index;

помощник / API 

import fetch from "isomorphic-unfetch";
const BASE_URL = "https://myendpoint/api";


export async function getDataLatestEvents() {
  const res = await fetch(`${BASE_URL}/eventos?latest`);
  let data = await res.json();
  console.log('API*************')
  return { data: data};
}
...