Далее. js динамически загружаемый компонент, не отображающий переданные данные - PullRequest
Новая
       5

Далее. js динамически загружаемый компонент, не отображающий переданные данные

0 голосов
/ 18 июня 2020

У меня есть сервер, на котором я пытаюсь загрузить нижний колонтитул страницы как компонент, но для этого нижнего колонтитула нужны данные, которые захватываются каждой отдельной страницей через getStaticProps. Когда я передаю данные в динамически загружаемый нижний колонтитул, данные можно увидеть, когда я console.log, но элементы из .map данных никогда не создаются.

Home: 

import { getCities } from '../lib/cities';
import dynamic from 'next/dynamic'

const DynamicFooter = dynamic(() => import('../components/footer'))

export default function Home({ allCities }) {
    return (
        <div className="container">

            <DynamicFooter {...allCities} />
        </div>
    )
}

export async function getStaticProps() {
    const allCities = getCities()
    return {
        props: {
            allCities
        }
    }
}

Нижний колонтитул: 

export default function Footer(data) {
    return (
        <div>
            <div>SOME TEXT</div>
            {
                data.cities.map((city) => {
                    console.log(city);
                    <div key={city.url}>
                        {city.name}
                    </div>
                })
            }
        </div>
    )
}

В console.log будет отображаться каждый загружаемый город и я могу видеть div НЕКОТОРЫЕ ТЕКСТА, но каждый div, содержащий city.name, никогда не добавляется на страницу.

1 Ответ

1 голос
/ 18 июня 2020

Вы не визуализируете карту в своем компоненте.

Вы можете использовать сокращенные или обычные возвраты. 

data.cities.map((city) => {
  return (
    <div key={city.url}>
      {city.name}
    </div>
  )
})

или 

data.cities.map((city) => (
  <div key={city.url}>
    {city.name}
  </div>
))
...