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>

))