ReactJS中Fetch JSON数据报错：response未定义求助

你的代码出现Uncaught (in promise) ReferenceError: response is not defined错误，核心原因有两个：

• 原URL是静态JSON文件地址，不支持&s=${Title}这种查询参数拼接，直接拼接后请求会失败，导致response变量未被正确赋值就执行response.json()，触发未定义错误。
• 异步请求没有错误处理，一旦fetch失败，后续代码会直接抛出未捕获的异常。

下面是修正后的代码，附带关键说明：

import { useEffect } from "react";

const URL_API = "https://gist.githubusercontent.com/saniyusuf/406b843afdfb9c6a86e25753fe2761f4/raw/523c324c7fcc36efab8224f9ebb7556c09b69a14/Film.JSON";

function App() {
  const searchMovies = async (title) => {
    try {
      // 请求完整的电影数据JSON
      const response = await fetch(URL_API);
      // 检查请求是否成功（状态码200-299）
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      const data = await response.json();
      // 前端筛选标题包含指定关键词的电影（不区分大小写）
      const filteredMovies = data.Search.filter(movie => 
        movie.Title.toLowerCase().includes(title.toLowerCase())
      );
      console.log(filteredMovies);
    } catch (error) {
      // 捕获并打印所有请求相关错误
      console.error("获取数据出错：", error);
    }
  };

  useEffect(() => {
    searchMovies('Avatar');
  }, []);

  return <h1>hello</h1>;
}

export default App;

关键修正点： #

1. 调整请求逻辑：原接口是静态JSON文件，无法通过URL参数筛选数据，改为先获取全部数据，再在前端用filter方法筛选匹配标题的电影。
2. 添加错误处理：用try/catch包裹整个异步流程，捕获请求失败、解析失败等所有异常，避免控制台抛出未处理的Promise错误。
3. 增加响应校验：通过response.ok判断请求是否成功，若失败主动抛出错误，提前终止后续代码执行。
4. 优化筛选逻辑：用toLowerCase()实现不区分大小写的标题匹配，提升用户体验。

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