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) => {&nbsp; return (&nbsp; &nbsp; <div key={city.url}>&nbsp; &nbsp; &nbsp; {city.name}&nbsp; &nbsp; </div>&nbsp; )})或者data.cities.map((city) => (&nbsp; <div key={city.url}>&nbsp; &nbsp; {city.name}&nbsp; </div>))