React Query useQuery问题：未点击按钮即触发查询

要实现仅点击提交按钮才触发查询，核心是控制React Query的useQuery执行时机，以下是具体解决方案：

方案1：使用enabled选项控制查询触发 #

React Query的useQuery提供了enabled配置项，可指定查询是否自动执行。我们可以利用这个选项，仅当用户输入有效的图书名称后才启用查询。

修改主组件代码 #

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import fetchBooks from "../helper/fetchBooks";

const Home = () => {
    // 初始化为空字符串，适配输入场景
    const [book, setBook] = useState("");

    // 添加enabled选项，仅当book不为空时执行查询
    const results = useQuery(["search", book], fetchBooks, {
        enabled: !!book,
        // 可选：设置缓存时间，避免重复请求相同关键词
        staleTime: 5 * 60 * 1000, // 5分钟
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        const inputValue = e.target.elements.book.value.trim();
        // 避免空值提交
        if (inputValue) {
            setBook(inputValue);
        }
    };

    return (
        <>
            <form onSubmit={handleSubmit}>
                <label htmlFor="book">
                    Book Name:
                    <input type="text" name="book" />
                </label>
                <button type="submit">Submit</button>
            </form>

            {/* 优化状态展示逻辑 */}
            {results.isLoading ? (
                <div>Loading...</div>
            ) : results.isError ? (
                <div>{results.error.message}</div>
            ) : book && results.data ? (
                <div>
                    <h2>Results</h2>
                    <ul>
                        {results.data.items.map((item) => (
                            <li key={item.id}>
                                <h3>{item.volumeInfo.title}</h3>
                                {/* 处理作者数组为空的情况 */}
                                <p>{item.volumeInfo.authors?.join(", ") || "Unknown Author"}</p>
                            </li>
                        ))}
                    </ul>
                </div>
            ) : null}
        </>
    );
};

export default Home;

优化fetchBooks函数（可选） #

添加输入校验和URL编码，避免无效请求和格式错误：

async function fetchBooks({ queryKey }) {
  const book = queryKey[1];

  // 防御性校验，避免空值请求
  if (!book) {
    throw new Error("Book name cannot be empty");
  }

  // 对书名进行URL编码，处理特殊字符
  const response = await fetch(
    `https://www.googleapis.com/books/v1/volumes?q=${encodeURIComponent(book)}`
  );
  if (!response.ok) {
    throw new Error(`Search not found for ${book}`);
  }
  return response.json();
}

export default fetchBooks;

关键说明 #

• enabled: !!book：当book为非空字符串时，useQuery才会执行查询，组件挂载时book为空，因此不会触发初始请求。
• 输入值trim处理：防止用户输入空格后触发无效查询。
• 结果区域条件判断：初始状态下不显示结果区域，提升用户体验。
• URL编码：确保书名中的特殊字符（如空格、&等）不会破坏请求格式。

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