React电影搜索栏API调用异常，请求技术排查帮助

核心问题定位 #

你的代码并非API本身故障，而是存在几处逻辑错误导致功能失效：

• useEffect中定义了异步请求函数但未执行，表单提交后根本没发起API调用
• 状态初始化与后续更新的键名大小写不匹配（初始化用Data，更新用data），导致渲染时无法正确获取数据
• 未对空查询做拦截，空值会触发无意义的API请求
• 硬编码API密钥存在泄露风险，且渲染时直接读取responseData.title，但实际数据嵌套在responseData.data层级下

修复后的完整代码 #

1. 表单组件（MovieForm.js）

import React, { useState } from "react";

export default function MovieForm({ movieName }) {
  const [movie, setMovie] = useState("");
  
  const changeHandle = (e) => {
    setMovie(e.target.value);
  };

  const submitHandle = (e) => {
    e.preventDefault();
    // 拦截空查询，避免无效API请求
    if (movie.trim()) {
      movieName(movie);
      setMovie("");
    }
  };

  return (
    <form onSubmit={submitHandle}>
      <label htmlFor="movie">电影名称 </label>
      <input type="text" id="movie" value={movie} onChange={changeHandle} />
      <button>搜索</button>
    </form>
  );
}

2. 搜索栏组件（MovieSearchBar.js）

import MovieForm from "./MovieForm";
import React, { useState, useEffect } from "react";
import axios from "axios";

export default function MovieSearchBar() {
  const [formData, setData] = useState("");
  const [responseData, setResponse] = useState({ data: null, loading: false });

  useEffect(() => {
    // 空查询直接返回，不发起请求
    if (!formData.trim()) return;

    const fetchData = async () => {
      setResponse(prev => ({ ...prev, loading: true }));
      try {
        const options = {
          method: "GET",
          url: "https://movies-api14.p.rapidapi.com/search",
          params: { query: formData },
          headers: {
            // 改用环境变量存储密钥，避免泄露
            "X-RapidAPI-Key": process.env.REACT_APP_RAPIDAPI_KEY,
            "X-RapidAPI-Host": "movies-api14.p.rapidapi.com",
          },
        };

        const response = await axios.request(options);
        setResponse({ data: response.data, loading: false });
      } catch (error) {
        console.error("API请求失败:", error.response?.data || error.message);
        setResponse(prev => ({ ...prev, loading: false }));
      }
    };

    // 执行异步请求函数
    fetchData();
  }, [formData]);

  const movieName = (m) => {
    setData(m);
  };

  return (
    <div>
      <MovieForm movieName={movieName} />
      
      {responseData.loading && <h1>加载中...</h1>}
      
      {/* 根据API返回结构渲染数据，示例假设返回数组，取第一个结果 */}
      {responseData.data && responseData.data.length > 0 && (
        <div>
          <h1>{responseData.data[0].title}</h1>
          <p>{responseData.data[0].genre?.join(", ") || "暂无类型信息"}</p>
        </div>
      )}
      
      {/* 空结果提示 */}
      {!responseData.loading && !responseData.data && formData && (
        <p>未找到相关电影</p>
      )}
    </div>
  );
}

额外配置说明 #

1. 环境变量设置：在项目根目录创建.env文件，添加REACT_APP_RAPIDAPI_KEY=你的RapidAPI密钥，React会自动识别该前缀的环境变量
2. API结构验证：确认API返回的数据格式（比如是否为数组、字段名称是否正确），可根据实际返回结果调整渲染逻辑
3. 错误提示优化：可在catch块中添加错误状态，给用户显示友好的错误提示，而非仅在控制台打印

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