React.js调用Google Books API如何处理无结果、图书未找到的错误

1. 新增错误提示状态 #

首先在状态声明部分新增错误信息存储状态，同时修正原有书籍状态的笔误：

// 搜索关键词状态
const [query, setQuery] = useState('');
// 书籍列表状态（修正原笔误：原变量名book改为books，和后续setBooks匹配）
const [books, setBooks] = useState([]);
// 错误提示状态
const [error, setError] = useState('');

2. 调整接口请求回调逻辑 #

Google Books API 无查询结果时不会返回items字段，或返回空数组，需要在成功回调中新增判断逻辑：

const handleSubmit = (e) => {
  e.preventDefault();
  // 搜索前清空上一次的错误信息
  setError('');

  axios
    .get(`https://www.googleapis.com/books/v1/volumes?q=${query}&maxResults=40`)
    .then((res) => {
      console.log(res.data.items);
      // 新增无结果判断
      if (!res.data.items || res.data.items.length === 0) {
        setError('未找到匹配的图书，请更换搜索关键词后重试');
        setBooks([]);
        return;
      }
      // 有结果时正常赋值
      setBooks(res.data.items);
    })
    .catch((err) => {
      console.log(err.response);
      // 可选补充：网络/接口报错时也给出用户提示
      setError('搜索请求失败，请检查网络连接后重试');
    });
}

3. 渲染层新增错误提示展示 #

在页面对应位置加入错误信息展示逻辑，示例如下：

return (
  <div className="search-page">
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={handleChange} placeholder="输入图书名称搜索" />
      <button type="submit">搜索</button>
    </form>

    {/* 错误提示展示 */}
    {error && <div className="error-notice">{error}</div>}

    {/* 书籍列表渲染 */}
    {books.length > 0 ? (
      <ul className="book-list">
        {books.map(book => (
          <li key={book.id}>
            <h3>{book.volumeInfo.title}</h3>
            <p>作者：{bookAuthors(book.volumeInfo.authors)}</p>
          </li>
        ))}
      </ul>
    ) : !error && query ? (
      <p>正在搜索中...</p>
    ) : null}
  </div>
)

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