从 Api 循环数据

Question

I have an api from which I want to display the data, I have 2 arrays each one has a category how would I iterate and display these 2 categories, so category Arts and category Entertainment. I have tried something but it is not working it is giving me this error TypeError: Cannot read property 'map' of undefined would really appreciate the help. Thanks in advance

import React,{useState, useEffect} from 'react'
import './Home.css'
import Books from './Books'
const url="https://json-api-smaiil.herokuapp.com/books"


const Home = () => {

  const [loading, setLoading] = useState(true)
  const [books, setBooks] = useState({})

    const fetchData =async()=>{
    setLoading(true)
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
    setBooks(books)
    }

  useEffect(()=>{
    fetchData();
  })
  

    return (
        <div>
          <h1 className='categories'>Categories</h1>
          {books[0].map((book)=>{
            return (<li key={book.id}>{book.category}</li>)
          })}
        </div>
    )
}

export default Home

{
     "Arts":[{
    "category": "Arts"
    Language: "English"
    Narrated by: "Faith G. Harper PhD LPC-S ACS ACN"
    Regular price: "$17.47"
    Release date: "03-20-18"
    bookName: "Unf--k Your Brain"
    by: "Faith G. Harper PhD LPC-S ACS ACN"
    category: "Arts and Entertainment"
    id: "1"
},
{

    Language: "English"
    Length: "1 hr and 33 mins"
    Narreted by: "James Taylor"
    Regular price: "$9.95"
    Release date: "01-31-20"
    Series: "Words + Music"
    bookName: " Break Shot: My First 21 Years"
    by: "James Taylor"
    id: "2"
}],

    "Entertainment":[{   
    "category" :"Entertainment"
    "id": "9",
    "image": "https://m.media-amazon.com/images/I/51tpSb0iy+L._SL500_.jpg",
    "bookName": "The Hiding Place",
    "by": "Corrie ten Boom, John Sherrill, Elizabeth Sherrill",
    "Narreted by": "Wanda McCaddon",
    "Length": "8 hrs and 14 mins",
    "Release date": "10-03-11",
    "Language": "English",
    "rating": "6,641 ratings",
    "Regular price": "$24.95",
  
},

{
    Language: "English"
    Length: "1 hr and 7 mins"
    Narreted by: "Aidan Gillen"
    Regular price: "$9.95"
    Release date: "03-31-15"
    bookName: "The Art of War"
    by: "Sun Tzu"
    id: "12"   
    rating: "19,765 ratings"
 
}]
}

Answer 1

change this. cause you have to map object, not array.

books[0].map((book)=>{
     return (<li key={book.id}>{book.category}</li>)
})

to

Object.keys(books).map(function(key, index) {
  let book = books[key];
  return <li key={key}>{book[0].category}</li>
});

Answer 2

try the below code:

      books.Arts.map((book)=>{
        return (<li key={book.id}>{book.category}</li>)
      })

One issue I see is the entry at index 1 of your array doesn't have key value corresponding to category which would give you undesired results.

Answer 3

const [books, setBooks] = useState({})

At this line you are setting the default value as an Object you are getting that error because the map function does not work with an object. Change the default to an empty array .

const [books, setBooks] = useState([])