Почему данные не отображаются в следующем js? - PullRequest
Новая
       9

Почему данные не отображаются в следующем js?

3 голосов
/ 08 января 2020

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

Мое требование - отображать данные в файле layout.js, а это layout.js файл является дочерним в index.js файле.

index. js: 

import Layout from "./layout";
import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        <Layout />
        <h4> Main content will be displayed here !! </h4>
      </div>
    );
  }
}

export default Home;

макет. js: 

import React from "react";
import fetch from "isomorphic-unfetch";

function Layout(props) {
  return (
    <div>
      <p>Preact has {props.stars} ⭐</p>
      <p> Why I couldn't get the above "props.star" ? </p>
    </div>
  );
}

Layout.getInitialProps = async () => {
  console.log("comes into layout getinitial props");
  const res = await fetch("https://api.github.com/repos/developit/preact");
  const json = await res.json(); // better use it inside try .. catch
  return { stars: json.stargazers_count };
};

export default Layout;

Итак, согласно приведенному выше коду, я вызвал страницу layout внутри страницы index.js (в моем реальном приложении мне нужно вызывать только так, чтобы не было изменений в вызове макета внутри индекса) ..

Но когда я сделал console.log() в функции Layout.getInitialProps в макете, он ничего не печатает и, следовательно, данные API не извлекаются ..

Завершите здесь рабочую демонстрацию с кодом

Почему я не могу получить данные внутри layout.js во время вызова в качестве детей от index.js?

Также предоставьте мне правильное обновленное решение для достижения этой цели. Я действительно искал много вопросов, но ни один из них не решил мою проблему, и я не мог понять эти решения. Пожалуйста, помогите мне с приведенным выше примером.

1 Ответ

1 голос
/ 08 января 2020

Это потому, что getInitialProps может быть добавлено только к компоненту по умолчанию, экспортированному страницей, добавление его к любому другому компоненту не будет работать.
Вы должны вместо этого использовать componentDidMount() или useEffect или переместить getInitialProps в индексе, а затем передать результат компоненту. что-то вроде (не проверено):

index. js: 

import Layout from "./layout";
import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        <Layout />
        <h4> Main content will be displayed here !! </h4>
      </div>
    );
  }
}

export default Home;

layout. js 

import React from "react";
import fetch from "isomorphic-unfetch";
class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stars: false
    };
  }
  async componentDidMount() {
    console.log("comes into layout getinitial props");
    const res = await fetch("https://api.github.com/repos/developit/preact");
    const json = await res.json(); // better use it inside try .. catch
    this.setState({ stars: json.stargazers_count });
  }
  render() {
    const { stars } = this.state;
    return (
      <div>
        <p>Preact has {stars} ⭐</p>
        <p> Why I couldn't get the above "props.star" ? </p>
      </div>
    );
  }
}

export default Layout;

Редактировать: Пример с компонентом класса
Бонус: Если вы хотите добавить макет для всех страниц вашего приложения, это не так. Это лучший подход, вместо этого вы должны взглянуть на custom _app. js, пример

...