NY Times API图书应用问题：点击任意图书仅显示单本详情

核心问题分析 #

这种情况大概率是跳转时没有正确传递目标图书的primary_isbn10参数，或者详情页获取参数的逻辑错误，导致每次都读取到同一个固定ISBN，进而请求了同一本图书的数据。

分步修复方案 #

1. 检查首页（index.html/script.js）的跳转逻辑 #

确保生成图书卡片时，跳转链接携带对应图书的primary_isbn10参数：

// 示例：生成图书卡片的代码片段
function renderBooks(books) {
  const container = document.getElementById('books-container');
  books.forEach(book => {
    const card = document.createElement('div');
    card.className = 'book-card';
    // 关键：把primary_isbn10作为查询参数拼到跳转链接里
    card.innerHTML = `
      <h3>${book.title}</h3>
      <p>作者：${book.author}</p>
      <a href="details.html?isbn=${book.primary_isbn10}" class="view-details">查看详情</a>
    `;
    container.appendChild(card);
  });
}

• 重点：链接必须包含?isbn=XXX的查询参数，XXX是当前图书的primary_isbn10值。

2. 修复详情页（details.js）的参数获取逻辑 #

确保详情页正确读取URL中的ISBN参数，而非使用固定值：

// 错误示例（导致固定图书详情）：
// const fixedIsbn = '1234567890';
// 正确写法：
function getQueryParam(param) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

const targetIsbn = getQueryParam('isbn');
if (!targetIsbn) {
  document.getElementById('details-container').innerHTML = '<p>未找到指定图书</p>';
  return;
}

// 用获取到的targetIsbn请求NY Times API的图书详情
fetch(`https://api.nytimes.com/svc/books/v3/reviews.json?isbn=${targetIsbn}&api-key=你的API密钥`)
  .then(res => res.json())
  .then(data => {
    // 渲染详情逻辑
    const container = document.getElementById('details-container');
    container.innerHTML = `
      <h2>${data.results[0].book_title}</h2>
      <p>作者：${data.results[0].book_author}</p>
      <p>书评：${data.results[0].summary}</p>
    `;
  })
  .catch(err => {
    console.error('请求失败：', err);
    document.getElementById('details-container').innerHTML = '<p>加载图书详情失败</p>';
  });

• 重点：使用URLSearchParams读取URL中的isbn参数，而非硬编码固定值。

3. 验证参数传递是否正确 #

• 点击首页不同图书时，观察浏览器地址栏的详情页URL，确认isbn参数是否对应不同数值。
• 在details.js中添加console.log(targetIsbn)，查看控制台输出的ISBN是否和点击的图书一致。

常见排查点 #

• 如果跳转链接没有参数：检查首页生成卡片时的href拼接逻辑，确保book.primary_isbn10正确获取到了API返回的值。
• 如果参数正确但详情还是固定：检查详情页是否误用了全局变量或者缓存的旧数据，确保每次页面加载都重新读取URL参数并发起新请求。

内容的提问来源于stack exchange，提问作者Himansu Kumar Nayak