Hasilkan berbilang komponen NextJS

Question

Saya sedang belajar NextJS dan saya ingin mencipta tapak web yang mempamerkan berbilang projek yang telah saya buat dengannya.

Saya mempunyai komponen yang dipanggil "Tag" iaitu templat butang dengan teks tersuai dan saya mahu menyampaikannya melalui prop:

export default function Tag({val}) {
    return(
        <>
            <p>{val}</p>
        </>
    )
}

Kemudian, dalam komponen Blok saya, saya ingin menjana bilangan komponen Tag yang sepadan berdasarkan bilangan elemen dalam tatasusunan yang diluluskan melalui prop:

import Tag from "./Tag"

export default function Block({tags, name}) {
    return(
        <>
            <section>
                <div></div>
                <h2>{name}</h2>
                <div>
                    {tags.forEach(tag => <Tag val={tag} />)}
                </div>
            </section>
        </>
    )
}

Kemudian, komponen Blok ini dipanggil di halaman utama:

import Block from './components/Block'

export default function Home() {
  return (
    <>
      <Block tags={["Webflow", "UI Design"]} name="Projet 1" />
    </>
  )
}

Masalahnya ialah: tiada label dipaparkan.

Saya rasa masalahnya berkaitan dengan kaedah forEach kerana apabila saya cuba menjana satu label tanpa kaedah forEach ia berfungsi dengan baik.

Apa masalahnya?

Answer 1

Anda menggunakan kaedah forEach, tetapi tiada apa yang dikembalikan dalam fungsi ini. Anda boleh menggunakan kaedah peta tatasusunan.

{tags.map(tag => <Tag val={tag} />)}

const tags = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const result = tags.forEach(tag => tag)
console.log(result) //undefined

const mapResult = tags.map(tag => tag)
console.log(mapResult) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]