使用useEffect根据输入请求API无法获取目标数据的问题

核心问题分析 #

你的代码存在几个关键问题，导致控制台无法显示预期的目标数据：

• 表单默认提交行为未阻止：点击搜索按钮会触发表单默认提交逻辑，页面直接刷新，之前的请求和日志都会被清空
• 初始空值触发无效请求：组件挂载时animeName是空字符串，会发起无意义的API请求，返回大量无关数据干扰判断
• API数据结构处理错误：Kitsu API的响应结构中，实际的动漫数据存放在data.data字段里，你直接把整个响应对象存入animeData，拿到的不是目标数据数组
• 子组件未接收数据：<AnimeData />没有传入animeData props，就算成功获取数据也无法传递给子组件使用

修改后的完整代码 #

function App() {
  const [animeName, setAnimeName] = useState("");
  const [animeData, setAnimeData] = useState([]);

  useEffect(() => {
    // 空值时不发起请求，同时清空现有数据
    if (!animeName.trim()) {
      setAnimeData([]);
      return;
    }

    const fetchData = async () => {
      try {
        // 对搜索关键词编码，避免特殊字符破坏URL格式
        const url = `https://kitsu.io/api/edge/anime?filter[text]=${encodeURIComponent(animeName)}`;
        const response = await fetch(url);
        // 检查响应是否成功，捕获HTTP错误
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        const data = await response.json();
        // 提取API返回的实际动漫数据数组
        setAnimeData(data.data);
        console.log("目标数据：", data.data);
      } catch (error) {
        console.error("请求错误：", error);
      }
    };

    fetchData();
  }, [animeName]);

  // 阻止表单默认提交行为，避免页面刷新
  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <div className="main">
      <h1>Anime Search App</h1>
      <form onSubmit={handleSubmit}>
        <div className="data-inputs">
          <input
            type="text"
            placeholder="Search for anime..."
            value={animeName}
            onChange={(e) => {
              setAnimeName(e.target.value);
            }}
          />
          <button type="submit">Search</button>
        </div>
      </form>
      {/* 将获取到的数据传递给子组件 */}
      <AnimeData data={animeData} />
    </div>
  );
}

关键修改说明 #

• 拦截表单提交：给form添加onSubmit处理函数，调用e.preventDefault()彻底避免页面刷新
• 过滤无效请求：在useEffect中判断animeName为空时不发起请求，同时清空状态数据
• 修正数据提取逻辑：从API响应的data.data字段中提取实际的动漫列表数据存入状态
• 编码搜索关键词：使用encodeURIComponent处理输入的关键词，避免特殊字符导致URL格式错误
• 传递数据给子组件：给<AnimeData />传入data props，确保子组件能获取到搜索结果
• 增加错误检查：通过response.ok判断请求是否成功，捕获并打印HTTP类错误

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