reactjs - react 无法调用和识别带有 axios 的组件并显示空白屏幕

Question

我正在创建一个网站来使用 create-react-app 搜索书籍我正在使用打开的 api 密钥并首先构建 UI，但我的反应无法调用组件

这是一个父组件

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}&QueryType=Bestseller&MaxResults=50&start=1&SearchTarget=Book&output=js&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 显示的书籍信息。我在哪里可以看到它

标签： reactjsapiaxiosreact-hooks