javascript - Next.js 动态加载的组件不显示传递的数据
问题描述
我有一个服务器,我试图将页面的页脚作为一个组件加载,但是该页脚需要每个单独的页面通过 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 都不会添加到页面中。
解决方案
您不会在组件中渲染地图。
您可以使用速记返回或正常返回。
data.cities.map((city) => {
return (
<div key={city.url}>
{city.name}
</div>
)
})
或者
data.cities.map((city) => (
<div key={city.url}>
{city.name}
</div>
))
推荐阅读
- python - 如何存储和读取 4d numpy 数组
- lotus-notes - 如果时间在 00.00 和 03.00 AM 之间,则获取布尔值 true
- r - 如何调试模拟退火代码?
- python - Pandas Column(列表)到列和行
- angular - 如何在 catchError 中发出另一个请求?
- windows - 批量查找唯一单词并将 100 行复制到文本文件
- python - 如何在部署 lambda 函数之前删除 ptvsd 调试代码
- mysql - MySQL将数字添加到计数结果中
- javascript - 如何返回作为覆盖对象元素结果的对象
- ionic3 - 首次运行时加载 nativeStorage 的问题