Попытка получить доступ к элементу в JSON с помощью API Google Книг с помощью React

Question

Я пытаюсь создать небольшое приложение для отслеживания прочитанных книг и использую API Google Книг. У меня есть вызов, но при доступе к данным JSON я не могу выбрать правильный элемент? (т.е. заголовок, автор и т. д.) Я бы подумал, что элементы kind, totalitems и items - это верхние 3, а items - массив. При вызове с помощью 'books.items' он отображается пустым, а при вызове массива заполняетсяbooks.items[0] показывает ошибку типа:

"Невозможно прочитать свойство 0 из неопределенного

Я пробовал возиться с некоторыми случайными комбинациями, но ничего не работает

Я адаптирую это руководство с сайта pusher.com (это всего лишь небольшой проект), ссылка на него: https://pusher.com/tutorials/consume-restful-api-react

мой 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;

компонент "мои книги"

import React from 'react'

const Books = ({books}) => {
    return (
        <div>
         {books.items[]}
        </div>
    )
};

export default Books

объект вернулся

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

Answer 1

Две вещи:

Во-первых, очень странно видеть метод рендеринга в первой части компонента. Всегда помещайте рендеринг в качестве последнего метода в вашем компоненте (по возможности используйте хуки и функциональные компоненты и недействительный метод рендеринга)

Во-вторых,

что это за sintax books.items[]? если вы хотите отобразить каждый элемент объекта "книги", вы должны сделать это в компоненте Книги:

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

У вас будет один div для каждого элемента с заголовком (вы можете показать нужное свойство...)

Answer 2

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