javascript - JSX mappning av arrayer som lagras i ett dynamiskt objekt (Next.js)

Jag är ny på React/Next och har lite svårt att visa data som returneras av ett API.

Här är datastrukturens uppbyggnad:

myBooks = {
  reading: [
    {
      title: 'book1',
      cover: 'cover1.jpg'
    }
  ],
  toRead: [
    {
      title: 'book2',
      cover: 'cover2.jpg'
    }
  ],
  read: [
    {
      title: 'book3',
      cover: 'cover3.jpg'
    },
    {
      title: 'book4',
      cover: 'cover4.jpg'
    }
  ]
}

Så här skulle jag vilja att datan visas:

Läsning:
bok1

Att läsa:
book2

Läs:
bok3
bok4

Jag skulle vilja att detta är dynamiskt, så om jag lägger till en annan kategori som "favoriter," visas de böckerna i sin egen sektion med en relevant rubrik.

Och här är mitt försök att återge dessa data, med hjälp av nästlade .map-funktioner:

{Object.keys(myBooks).map(category => {
    <h3>{category}</h3>
    category.map(book => (
        <p>{book.title}</p>
    ))
})}

Min motivering:

  1. .map kan inte användas på ett objekt, så jag börjar med att välja objektets nycklar, vilket jag kallar category (reading, toRead, read)
  2. När jag visar kategorin, gå neråt och lista varje bok som är kopplad till den kategorin

Felet jag får:
TypeError: category.map är inte en funktion

Föreslår att kategorin inte är en array, eller inte existerar. All hjälp skulle uppskattas mycket!

Svar #1

Du kanske vill använda Object.entries istället, detta ger dig tillgång till varje elements nyckel och värde.

{Object.entries(myBooks).map(([category, books]) => (
    <>
        <h3>{category}</h3>
        {books.map((book) => (
            <p>{book.title}</p>
        ))}
    </>
))}

Svar #2

  1. funktionen inuti den första mappen måste returnera endast ett JSX-element.
  2. kategori är nyckeln, så för att få värdet använd: myBooks[kategori]
  3. category.map((book) => <p>{book.title}</p>); är ett JS-uttryck, det måste vara mellan {}, och ta bort semikolonet i slutet.
{Object.keys(myBooks).map((category) => (
        <>
          <h3>{category}</h3>
          {myBooks[category].map((book) => (
            <p>{book.title}</p>
          ))}
        </>
      ))}

Relaterade artiklar