Задать вопрос
@MRcracker
nextjs

Почему свойства props компонента is not defined?

Написал код и поместил его в index.js. Все работает. Решил вынести код в отдельный компонент и код стал выдавать ошибку, что list is not defined. Как решить проблему и с чем она связана?

export default function Home({list}) {
  return (
    <>
      <Head>
        <title>Home</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1>Welcome home!</h1>
      <ul>
        {list.map((item) => (
          item.links.map((elem)=>(
            <li >
            <Link href={`/menu/${elem.id}`}>
              <a>{elem.label}</a>
            </Link>
          </li>
          ))
   
        ))}
      </ul>

    </>
  );
}
export const getStaticProps = async () => {


  const menuData = await axios.get(`${url}/menu`)

  return {
    props: {
      list: menuData.data,
    },
    revalidate: 1, 
  };
};
  • Вопрос задан
  • 192 просмотра
5 комментариев
Подписаться 1 Простой 5 комментариев
Решения вопроса 1
IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности
Ошибка list is not defined связана с тем, что функция для фетчинга данных getStaticProps не работает за пределами папки /pages.

Вы можете фетчить только на страницах находящихся в /pages
Если вы вынесли компонент в отдельную папку, например /components/pages/MainPage и там пытаетесь использовать getStaticProps - эффекта не будет.

Из доков:
getStaticProps can only be exported from a page. You can’t export it from non-page files.


Решение:
Перенести функцию getStaticProps на страницу в папке /pages, а уже далее передавать пропсы в нужный компонент
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Senior ML Engineer (Computer Vision)
Gradient
от 450 000 ₽
Разработчик Java (Middle/Senior)
ДИКСИ • Москва
от 150 000 до 270 000 ₽
Backend Teamlead
Тетрика • Москва
от 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Куплю клоаку на Python
05 мая 2024, в 07:41
2000 руб./за проект
Доработать интеграцию с внешней платежной системой на Тильде
05 мая 2024, в 07:38
10000 руб./за проект
Внести правки в проект на nest и react
05 мая 2024, в 06:38
50000 руб./за проект
Ещё заказы