Блог

Я видел много вопросов, связанных с проблемами с getInitialProps и getStaticProps , но не смог решить свои собственные.

Я просто пытаюсь загрузить некоторые данные json (I console.зарегистрировал его и знаю, что оно не определено) и передаю его моему Main компоненту:

 import Card from "./components/Card";
import data from "../data/data.json";

const Main = ({ cards }) => {
  return (
      <div}>
        {cards.map((card) => {
          <Card key={card.id} card={card} />;
        })}
      </div>

  );
};

Main.getInitialProps = async (context) => {
  return {
    props: { cards: data },
  };
};

export default Main;
  

Ошибка типа: не удается прочитать свойство ‘map’ неопределенного

Я тоже пробовал с getStaticProps , та же проблема.

Что я делаю не так?

Согласно документам, это должно сработать:

 import Card from "./components/Card";
import data from "../data/data.json";

const Main = ({ cards }) => {
  return (
      <div}>
        {cards.map((card) => {
          <Card key={card.id} card={card} />;
        })}
      </div>

  );
};

Main.getInitialProps = async (context) => {
  // await for `data`

  return {
    cards: data,
  };
  // ^-- note the change, you nested your object inside a `props` property
};

export default Main;
  

 Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.url.com')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
  

вы должны изменить это

 return {
    props: { cards: data },
  };
  

следует использовать это:

 return { cards: data  }
  

подробнее смотрите: docs