掌握React表单、API请求与useEffect：避免常见陷阱

import React, { useState, useEffect, useCallback, useMemo } from "react";
import "../../styles/components.css"; // 假设路径正确
import './Recipes.css'; // 假设路径正确

const key = 'API_KEY'; // 替换为你的实际API密钥

export default function Recipes() {
    const [posts, setPosts] = useState([]);
    const [searchInput, setSearchInput] = useState("");
    const [submittedSearch, setSubmittedSearch] = useState(""); // 用于触发API请求的状态

    // 使用 useMemo 优化 recipesDisplay，避免不必要的重新渲染
    const recipesDisplay = useMemo(() => {
        return posts?.map((response) => (
            <div key={response.id} className="list-group-item">
                <img src={response.image_url} alt={response.title || 'Recipe Image'} />
                <h3>{response.title}</h3>
                <p>By: {response.publisher}</p>
            </div>
        ));
    }, [posts]); // 仅当 'posts' 数组变化时才重新计算

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

    // 封装数据获取逻辑，使用 useCallback 避免在每次渲染时重新创建
    const fetchData = useCallback(async (query) => {
        if (!query) {
            setPosts([]); // 如果查询为空，则清空食谱列表
            return;
        }
        try {
            const response = await fetch(`https://forkify-api.herokuapp.com/api/v2/recipes?search=${query}&key=${key}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const jsonResponse = await response.json();
            // 确保 jsonResponse.data.recipes 是一个数组，即使API返回null或undefined
            setPosts(jsonResponse.data.recipes || []);
        } catch (err) {
            console.error("Failed to fetch recipes:", err);
            setPosts([]); // 发生错误时清空食谱列表
            // 可以在这里添加用户友好的错误提示
        }
    }, []); // fetchData 不依赖于组件作用域内会变化的值，所以依赖数组为空

    // 使用 useEffect 监听 submittedSearch 变化，从而触发 API 请求
    // 这样可以确保只在用户提交表单后才发起请求
    useEffect(() => {
        fetchData(submittedSearch);
    }, [submittedSearch, fetchData]); // 依赖 submittedSearch 和 fetchData

    // 处理表单提交的函数
    const handleSubmit = (e) => {
        e.preventDefault(); // 阻止表单默认提交行为，防止页面刷新
        setSubmittedSearch(searchInput); // 更新 submittedSearch 状态，从而触发 useEffect
    };

    return (
        <div className="main">
            <h1>Recipes</h1>
            <form onSubmit={handleSubmit}> {/* 将 onSubmit 绑定到表单 */}
                <input
                    type="search"
                    placeholder="Search here"
                    onChange={handleChange}
                    value={searchInput}
                />
                <button type="submit">Submit</button> {/* 设置按钮类型为 submit */}
            </form>

            <div className="recipes-list">
                {/* 根据 posts 数组的长度显示内容 */}
                {posts.length > 0 ? recipesDisplay : <p>No recipes found. Try searching!</p>}
            </div>
        </div>
    );
}