使用React尝试使用googlebooksapi访问JSON中的元素

我正在尝试制作一个小应用程序来跟踪我读过的书，我正在使用谷歌图书API。 我的调用是正确的，但在访问JSON数据时，我似乎无法选择正确的元素？（即。 标题、作者等） 我原以为kind、totalitems和items元素是前3位的元素，items是一个数组。 使用“books.items”调用时，它显示为空，当数组调用填充时，

books.items[0]

is显示类型错误：

无法读取未定义的属性“0”

我试着用一些随机组合来搞乱，但似乎什么都没用

我正在“改编”pusher.com上的这本指南（这只是一个小项目），链接到：

我的app.js

import React, {Component} from 'react';
import Books from './components/books';

const apikey = 'my key here'
const isbn = '9780395647417'
const url = 'https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + '?projection=lite&key=' + apikey;
class App extends Component {
    render() {
        return (
            <Books books={this.state.books} />
        )
    }

    state = {
        books: []
    };

    componentDidMount() {
        fetch(url)
            .then(res => res.json())
            .then((data) => {
                this.setState({ books: data })
            })
            .catch(console.log)
    }
}

export default App;

两件事：

第一，在组件的第一部分中看到渲染方法非常奇怪。始终将渲染作为组件中的最后一个方法（如果可能，请使用挂钩和功能组件，并取消渲染方法）

第二,

那是什么？是什么？ 如果要渲染“books”对象的每个项目，应在books组件中执行此操作：

<div>
{books.items.map(item => <div key={item.id}>{item.title}</div>)
</div>

{books.items.map（item=>{item.title}）

---

每个项目将有一个div显示标题（您可以显示所需的属性…

啊，是的，我同意渲染（尽管据我所知只是语义？）.就语法而言，我实际上什么都做不到，所以我只是使用了超基本的东西。使用map会产生与上面类似的错误，TypeError无法读取undefined的属性“map”

{
"kind": "books#volumes",
"totalItems": 1,
"items": [
{
"kind": "books#volume",
"id": "jlytxgEACAAJ",
"etag": "Kq99jRrSq+c",
"selfLink": "https://www.googleapis.com/books/v1/volumes/jlytxgEACAAJ",
"volumeInfo": {
"title": "The Lord of the Rings",
"authors": [
"John Ronald Reuel Tolkien"
],
"publishedDate": "1994",
"description": "The Fellowship was scattered. Some were bracing hopelessly for war against the ancient evil of Sauron.",
"industryIdentifiers": [],
"readingModes": {},
"printType": "BOOK",
"categories": [],
"averageRating": 5,
"ratingsCount": 1,
"maturityRating": "NOT_MATURE",
"allowAnonLogging": false,
"contentVersion": "preview-1.0.0",
"panelizationSummary": {},
"language": "en",
"previewLink": "http://books.google.co.uk/books?id=jlytxgEACAAJ&dq=isbn:9780395647417&hl=&cd=1&source=gbs_api",
"infoLink": "http://books.google.co.uk/books?id=jlytxgEACAAJ&dq=isbn:9780395647417&hl=&source=gbs_api",
"canonicalVolumeLink": "https://books.google.com/books/about/The_Lord_of_the_Rings.html?hl=&id=jlytxgEACAAJ"
},
"saleInfo": {},
"accessInfo": {},
"searchInfo": {}
}
]
}

<div>
{books.items.map(item => <div key={item.id}>{item.title}</div>)
</div>