Next.js 动态加载的组件不显示传递的数据

Question

我有一个服务器，我试图将页面的页脚作为一个组件加载，但该页脚需要每个单独的页面通过 getStaticProps 获取的数据。当我将数据传递给动态加载的页脚时，当我 console.log 时可以看到数据，但永远不会创建数据的 .map 中的元素。

首页：

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 将显示正在加载的每个城市，我可以看到 SOME TEXT div，但从未将包含 city.name 的每个 div 添加到页面中。

Answer 1

您不会在组件中渲染地图。

您可以使用速记回车或普通回车。

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

或

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