JS调用fetch返回API数据时报Cannot read property 'results' of undefined错误如何解决

修复方案 #

核心问题原因 #

• Promise链式调用未正确返回值：你在打印数据的.then回调中仅执行了console.log(books)，没有手动返回books对象，Promise的then方法无显式返回时默认返回undefined，导致下一个链式调用的入参为undefined，访问undefined.results直接报错。
• 函数语法错误：你提供的showBooks代码末尾多了一个多余的闭合大括号}，会触发语法报错。
• 可选结构对齐：修复前两个问题后如果仍报错，需要和你控制台打印的API返回结构对齐，确认书籍列表字段是否真的叫results。

修复后的代码 #

searchBook 函数调整

function searchBook(query){    
    const url = BASE_URL + `${query}` + '&' + API_KEY;
    fetch(url)
    .then(res => res.json())
    .then(books =>{
        console.log(books);
        return books; // 新增：把接口返回的完整数据传递给下一个then
    })
    .then(books => showBooks(books.results)); 
    // 若接口直接返回书籍数组，此处改成showBooks(books)即可
}

showBooks 函数调整

const showBooks = books =>{    
    const main = document.getElementById('book_container');
    main.innerHTML = "";
    books.forEach(book => {
        const bookEl = document.createElement('div');
        bookEl.classList.add('book');
        bookEl.innerHTML = `
        <div class="book">
        <div class="border"></div>
            <img src="img/cover.jpg">
            <div class="book_info">
                <h3>${book.title}</h3>
                <p>${book.authors}</p>
            </div>
            <div class="overview">
                <p>${book.description}</p>
            </div>
        </div>
        `
        main.appendChild(bookEl);
    });
}
// 已删除原来多余的一个闭合大括号

内容的提问来源于stack exchange，提问作者Carl