循环来自 Api 的数据答案

【问题标题】：Looping the the data from an Api循环来自 Api 的数据
【发布时间】：2021-03-17 12:17:37
【问题描述】：

我有一个要显示数据的 api，我有 2 个数组，每个数组都有一个类别，我将如何迭代和显示这 2 个类别，因此类别艺术和娱乐类别。我已经尝试了一些东西，但它没有工作它给了我这个错误TypeError: Cannot read property 'map' of undefined 非常感谢您的帮助。提前致谢

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

【问题讨论】：

标签： javascript arrays json reactjs object

【解决方案1】：

改变这个。因为你必须映射对象，而不是数组。

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

到

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

【讨论】：

一个问题是很难创建一个 onClick 函数，所以当我按下该类别时，显示该类别的书籍，在这种情况下（我认为是 2 个对象）每个类别

【解决方案2】：

试试下面的代码：

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

我看到的一个问题是您的数组索引 1 处的条目没有与类别对应的键值，这会给您带来不希望的结果。

【讨论】：

还是同样的问题

【解决方案3】：

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

在这一行中，您将默认值设置为 Object，您会收到该错误，因为 map 函数不适用于对象。将默认值更改为 空数组。

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

【讨论】：

还是同样的问题
@Jakir Hossen 的回答更好。这只是解决为什么.map() 给你错误，你的数据响应是一个对象，所以他的改变更合适