Блог

Я создаю веб-сайт для поиска книг с помощью приложения create-react. Сначала я использую открытый ключ api и создаю пользовательский интерфейс, но мой react не может вызвать компонент

вот родительский компонент

 import React, { useEffect, useState } from 'react';
import BookItem from './BookItem';
import axios from 'axios';

const BookList = () => {


    const [books, setBooks] = useState(null)
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true)
            try {
                const response = await axios.get('ttb/api/ItemList.aspx?ttbkey={private_api_key}amp;QueryType=Bestselleramp;MaxResults=50amp;start=1amp;SearchTarget=Bookamp;output=jsamp;Version=20131101', )
                setBooks(response.data.books)
            } catch (e) {
                console.log(e)
            }
            setLoading(false)
        } 
        fetchData()
    }, [])

    if (loading) {
        return <div>Now on loading...</div>
    }
    if (!books) {
        return null
    }
    return (
        <div>
            {
                books.map(item => (<BookItem key={item.url} item={item}/>))
            }
        </div>
    );
};
 

а вот дочерний компонент, получающий реквизиты от родителя

 import React from 'react';

const BookItem = ({ item }) => {
    const {title, author, cover, link, description, pubDate } = item
    return (
        <div>
            <div className="thumbnail">
                <a href={link}>
                    <img src={cover} alt="coverImg"/>
                </a>
            </div>
            <div className="info">
                <h2>{title}</h2>
                <ul>
                    <li><p>{author}</p></li>
                    <li><p>{description}</p></li>
                    <li><p>{pubDate}</p></li>
                </ul>
            </div>
        </div>
    );
};

export default BookItem;
 

Я могу видеть
Теперь при загрузке по

  if (loading) {
            return <div>Now on loading...</div>
        }
 

но после того, как он загрузился, я вижу только пустой экран
, и под родительским компонентом нет компонента

подобный этому…

я ожидаю, что появится информация об этой книге по api. где я могу это исправить, чтобы увидеть