优化React表单输入与API请求：useEffect的正确姿势与提交处理

import React, { useState, useEffect, useCallback } from "react";
import "../../styles/components.css";
import "./Recipes.css";

// 替换为你的实际API密钥
const key = "YOUR_API_KEY";

export default function Recipes() {
  // 存储从API获取的食谱列表
  const [posts, setPosts] = useState([]);
  // 存储输入框中实时显示的值
  const [searchInput, setSearchInput] = useState("");
  // 存储用户点击提交按钮后确定的搜索词，用于触发API请求
  const [submittedSearchTerm, setSubmittedSearchTerm] = useState("");
  // 加载状态，用于显示加载提示
  const [loading, setLoading] = useState(false);
  // 错误状态，用于显示错误信息
  const [error, setError] = useState(null);

  // 使用 useCallback 封装数据获取函数，避免不必要的重新创建
  // 这样可以作为 useEffect 的依赖项，而不会导致无限循环或不必要的执行
  const fetchData = useCallback(
    async (searchTerm) => {
      // 如果没有搜索词，清空食谱列表并返回
      if (!searchTerm) {
        setPosts([]);
        return;
      }

      setLoading(true); // 开始加载，设置加载状态为 true
      setError(null); // 清除之前的错误信息

      try {
        const response = await fetch(
          `https://forkify-api.herokuapp.com/api/v2/recipes?search=${searchTerm}&key=${key}`
        );

        if (!response.ok) {
          // 如果响应不成功，抛出错误
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const jsonResponse = await response.json();
        // 更新食谱列表，确保即使API返回空数组也能正确处理
        setPosts(jsonResponse.data.recipes || []);
      } catch (err) {
        console.error("Failed to fetch recipes:", err);
        setError("无法加载食谱。请检查网络或稍后再试。"); // 设置用户友好的错误信息
        setPosts([]); // 出现错误时清空食谱列表
      } finally {
        setLoading(false); // 无论成功或失败，结束加载
      }
    },
    [] // fetchData 的依赖项为空，因为它不直接依赖组件状态，而是通过参数接收 searchTerm
  );

  // 使用 useEffect 监听 submittedSearchTerm 的变化，并在变化时触发 fetchData
  useEffect(() => {
    fetchData(submittedSearchTerm);
  }, [fetchData, submittedSearchTerm]); // 依赖项包括 fetchData (来自 useCallback) 和 submittedSearchTerm

  // 处理输入框内容变化
  const handleInputChange = (e) => {
    setSearchInput(e.target.value);
  };

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为（页面刷新）
    setSubmittedSearchTerm(searchInput); // 更新提交的搜索词，这将触发 useEffect
  };

  // 渲染食谱列表
  const recipesDisplay =
    posts.length > 0 ? (
      posts.map((recipe) => (
        <div key={recipe.id} className="list-group-item">
          <img src={recipe.image_url} alt={recipe.title} />
          <h3>{recipe.title}</h3>
          <p>By: {recipe.publisher}</p>
        </div>
      ))
    ) : (
      // 在没有加载、有提交搜索词但没有结果时显示提示
      !loading && submittedSearchTerm && <p>未找到相关食谱。</p>
    );

  return (
    <div className="main">
      <h1>Recipes</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="search"
          placeholder="Search here"
          onChange={handleInputChange}
          value={searchInput}
        />
        <button type="submit">Submit</button>
      </form>

      {/* 根据加载、错误状态和数据情况显示不同内容 */}
      {loading && <p>正在加载食谱...</p>}
      {error && <p className="error">{error}</p>}
      {!loading && recipesDisplay}
    </div>
  );
}