React中使用Axios调用Bing搜索API：传递密钥与获取输入

一、修正API请求的参数传递（密钥+搜索参数） #

你的useSearch Hook存在几个关键错误，以下是修正后的代码及说明：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const BASE_URL = 'https://api.bing.microsoft.com/v7.0/search';
const API_KEY = process.env.REACT_APP_SEARCH_KEY;

const useSearch = (searchTerm) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 空搜索词跳过请求，避免无效调用
    if (!searchTerm.trim()) {
      setData(null);
      return;
    }

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        // Axios请求的正确配置结构
        const response = await axios.get(BASE_URL, {
          // 正确传递API密钥：Bing API要求通过请求头验证
          headers: {
            'Ocp-Apim-Subscription-Key': API_KEY
          },
          // 搜索参数放在params字段，Axios自动拼接为URL查询字符串
          params: {
            q: searchTerm,
            count: 10,
            mkt: 'en-us'
          }
        });
        setData(response.data);
      } catch (err) {
        setError(err.response?.data || '搜索请求失败');
        console.error('搜索出错:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [searchTerm]);

  return { data, loading, error };
};

export default useSearch;

关键修正点：

• 去掉请求头键名的多余冒号，直接引用环境变量API_KEY（原代码写死了字符串'API_KEY'）
• 将搜索参数从headers移到params字段，符合Axios的参数传递规则
• 添加await关键字获取实际响应数据（原代码直接拿Promise对象）
• 增加loading和error状态，提升交互体验

二、连接搜索栏输入与API请求 #

需要在NavBar组件中管理用户输入状态，并将输入值传递给useSearch Hook：

import React, { useState } from 'react';
import './NavBar.css';
import logo_dark from '../../assets/logo_light2.png';
import logo_light from '../../assets/logo_light.png'; // 补充原代码缺失的导入
import search_icon_light from '../../assets/search-w.png';
import search_icon_dark from '../../assets/search-b.png';
import toggle_light from '../../assets/night.png';
import toggle_dark from '../../assets/day.png';
import useSearch from './useSearch'; // 导入搜索Hook

function NavBar({ theme, setTheme }) {
  // 管理搜索输入状态
  const [searchTerm, setSearchTerm] = useState('');
  // 传入搜索词触发API请求
  const { data, loading, error } = useSearch(searchTerm);

  // 主题切换逻辑优化
  const toggle_mode = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  // 实时同步输入框内容到状态
  const handleInputChange = (e) => {
    setSearchTerm(e.target.value);
  };

  // 回车触发搜索（可选增强）
  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !searchTerm.trim()) {
      alert('请输入搜索内容');
    }
  };

  // 搜索图标点击事件（可选增强）
  const handleSearchClick = () => {
    if (!searchTerm.trim()) {
      alert('请输入搜索内容');
    }
  };

  return (
    <div className='navbar'>
      <img 
        src={theme === 'light' ? logo_light : logo_dark} 
        alt='Logo' 
        className='logo' 
      />
      <ul className='nav-list'>
        <li>SEARCH</li>
      </ul>
      <div className='search-box'>
        <input 
          className='search-bar' 
          type='text' 
          placeholder='Search'
          value={searchTerm}
          onChange={handleInputChange}
          onKeyPress={handleKeyPress}
        />
        <img 
          className='search-icon' 
          src={theme === 'light' ? search_icon_light : search_icon_dark} 
          alt='搜索'
          onClick={handleSearchClick}
        />
      </div>
      <img 
        onClick={toggle_mode} 
        src={theme === 'light' ? toggle_light : toggle_dark} 
        alt='切换主题' 
        className='toggle-icon'
      />
    </div>
  );
}

export default NavBar;

核心逻辑说明：

• 用useState创建searchTerm状态，绑定到输入框的value和onChange事件，实时同步用户输入
• 将searchTerm作为参数传入useSearch Hook，利用useEffect监听searchTerm变化，自动发起API请求
• 补充了回车和点击图标的交互验证，避免空搜索

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