Следующий js с django api рендеринг данных

Я работаю над фронт-эндом проекта и застрял на некоторое время. Я создал api с помощью django rest framework и пытаюсь подключиться к Nextjs front end. Данные должны отображаться на первой странице, поэтому я вызываю getInitialProps. Ниже приведен код

import styles from '../styles/Home.module.css';

import axios from 'axios';

const Home = ({ listings, error }) => {
  if (error) {
    return <div>An error occured: {error.message}</div>;
  }
  return (
    <ul>
      {listings.map((listing) => (
        <li key={listing.address}>{listing.title}</li>
      ))}
    </ul>
  );
};

Home.getInitialProps = async (ctx) => {
  try {
    const res = await axios.get('http://127.0.0.1:8000/api/listings/?page=4');
    const rep = await res.data;
    console.log(rep.results);
    listings = rep.results;

    return { listings };
  } catch (error) {
    return { error };
  }
};

export default Home;

В журнале консоли я получаю данные, которые имеют следующий формат:

[
  {
    index: 1734112,
    user: 11233,
    title: 'Classical style',
    address: 'address 23, city , country',
    bedrooms: '2',
    bethrooms: '1',
    price: '5803',
    list_type: 'rent'
  },
  {
    index: 1722303,
    user: 32119,
    title: 'Pangrati On the Lake',
    address: 'address 28, city , country',
    bedrooms: '1',
    bethrooms: '1',
    price: '4800',
    list_type: 'rent'
  }
]

Но я получаю ошибку, возникшую в браузере без указания ошибки.

А в консоли я получаю сообщение 

next-dev.js?3515:32 Warning: Did not expect server HTML to contain the text node "listings is not defined" in <div>.
    at div
    at Home (webpack-internal:///./pages/index.js:50:26)
    at MyApp (webpack-internal:///./pages/_app.js:38:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:359:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:793:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)

Я не уверен, в чем проблема, поэтому любая помощь будет очень признательна. Спасибо!

Вы присваиваете значение некоторой переменной listings = rep.results;, но эта переменная не была объявлена, вы не можете сделать это в строгом режиме (который, как я полагаю, является стандартным в этом случае)

Так что просто объявите его как const, и ошибка исчезнет:

const listings = rep.results
Вернуться на верх