如何根据用户输入动态修改Axios baseURL调用谷歌图书API

你当前代码无法实现动态修改请求参数的核心原因有三点：

• 写在组件外的baseURL是固定值，模板字符串里的{input}只是普通字符串，不会随用户输入自动更新
• 请求逻辑放在了空依赖数组的useEffect中，仅会在组件首次挂载时执行一次，不会响应提交操作
• 输入框没有做受控绑定、提交按钮没有绑定点击事件，无法拿到用户输入也无法触发新的请求

修改思路 #

1. 单独存储接口固定前缀，搜索关键词部分在请求发起时动态拼接，不需要提前写死完整地址
2. 新增状态存储输入框的实时值，通过输入框的onChange事件同步用户输入
3. 把搜索请求封装为独立函数，绑定到提交按钮的onClick事件上，用户点击时再拿最新的输入值发请求
4. 增加基础的判空和兜底逻辑，避免无数据时页面报错、空白

可直接运行的完整代码 #

import axios from 'axios';
import React from 'react';

// 接口固定部分单独维护
const BASE_API = 'https://www.googleapis.com/books/v1/volumes?q=';

export default function App() {
  const [searchKey, setSearchKey] = React.useState('');
  const [bookResult, setBookResult] = React.useState(null);

  const handleSubmitSearch = () => {
    const keyword = searchKey.trim();
    if (!keyword) return;
    // 请求时动态拼接最新的搜索关键词
    axios.get(`${BASE_API}${encodeURIComponent(keyword)}`).then(res => {
      setBookResult(res.data);
    });
  };

  return (
    <>
      <input
        placeholder="请输入书名"
        value={searchKey}
        onChange={e => setSearchKey(e.target.value)}
      />
      <button onClick={handleSubmitSearch}>Submit</button>

      {bookResult?.items?.[0] ? (
        <div>
          <h1>{bookResult.items[0].volumeInfo.title}</h1>
          <h2>{bookResult.items[0].volumeInfo.publisher}</h2>
          <img 
            src={bookResult.items[0].volumeInfo.imageLinks.thumbnail}
            alt="书籍封面"
          />
        </div>
      ) : (
        <p>输入书名后点击提交即可查询书籍信息</p>
      )}
    </>
  );
}

可选优化项 #

• 用encodeURIComponent转义用户输入的关键词，避免特殊字符导致请求参数解析异常
• 用可选链操作符?.读取接口返回的嵌套字段，避免接口返回结构异常时直接抛出JS错误
• 如果需要支持回车键触发搜索，可以给输入框绑定onKeyDown事件，判断按键为Enter时调用搜索函数
• 可以新增loading状态、请求错误处理逻辑，优化交互体验

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