Saya memiliki server tempat saya mencoba memuat footer halaman sebagai komponen, tetapi footer itu membutuhkan data yang diambil oleh setiap halaman individual melalui getStaticProps. Ketika saya meneruskan data ke footer yang dimuat secara dinamis, data dapat dilihat saat saya console.log, tetapi elemen dari .map data tidak pernah dibuat.

Beranda:

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
        }
    }
}

Catatan Kaki:

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 akan menampilkan setiap kota yang sedang dimuat dan saya dapat melihat div BEBERAPA TEKS, tetapi setiap div yang berisi nama kota tidak pernah ditambahkan ke halaman.

0
Binbash 18 Juni 2020, 01:06

1 menjawab

Jawaban Terbaik

Anda tidak merender peta di komponen Anda.

Anda dapat menggunakan pengembalian singkat atau pengembalian normal.

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

Atau

data.cities.map((city) => (
  <div key={city.url}>
    {city.name}
  </div>
))
1
hurricane 17 Juni 2020, 22:12