掌握React表单与API请求：避免useEffect误用及提交刷新问题

const ShowPosts = () => {
    useEffect( () => {
        // ... API fetching logic ...
    }, []);
}
// ...
{ShowPosts()} // 在渲染函数中调用

<form>
    <input
        // ...
    />
    <button onClick={handleChange}>Submit</button>
</form>

import React, { useState, useEffect, useCallback } from "react";
// ... 其他导入

const key = "YOUR_API_KEY"; // 实际应用中，API Key应从环境变量或安全方式获取

export default function Recipes() {
    const [posts, setPosts] = useState([]);
    const [searchInput, setSearchInput] = useState("");
    // 引入一个单独的状态来触发API请求，与输入框的状态分离
    const [query, setQuery] = useState("");
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    // 当query状态变化时，触发API请求
    useEffect(() => {
        // 避免在query为空时（例如组件初次加载）发起请求
        if (!query) {
            setPosts([]); // 清空之前的搜索结果
            return;
        }

        const fetchData = async () => {
            setIsLoading(true);
            setError(null); // 重置错误状态
            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();
                setPosts(jsonResponse.data.recipes || []); // 确保即使没有结果也设置为[]
            } catch (err) {
                console.error("Failed to fetch recipes:", err);
                setError("Failed to load recipes. Please try again.");
                setPosts([]); // 错误时清空数据
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, [query]); // 依赖项为query，只有query变化时才重新运行副作用

    // ... 其他代码
}

// ...
    // 处理输入框变化
    const handleInputChange = useCallback((e) => {
        setSearchInput(e.target.value);
    }, []);

    // 处理表单提交
    const handleFormSubmit = useCallback((e) => {
        e.preventDefault(); // 阻止页面刷新
        setQuery(searchInput); // 将当前的searchInput设置为query，触发useEffect
    }, [searchInput]); // 依赖searchInput，确保提交时获取最新值

    // ...
    return (
        <div className="main">
            <h1>Recipes</h1>
            <form onSubmit={handleFormSubmit}> {/* 绑定onSubmit事件 */}
                <input
                    type="search"
                    placeholder="Search here"
                    onChange={handleInputChange}
                    value={searchInput}
                />
                <button type="submit">Submit</button> {/* 明确指定type="submit" */}
            </form>
            {/* ... 渲染结果 */}
        </div>
    );
}

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

const key = "YOUR_API_KEY"; // **重要：在实际应用中，API Key应从环境变量或更安全的方式获取**

export default function Recipes() {
    const [posts, setPosts] = useState([]);
    const [searchInput, setSearchInput] = useState(""); // 用于实时显示在输入框中的值
    const [query, setQuery] = useState("");             // 用于实际触发API请求的搜索词
    const [isLoading, setIsLoading] = useState(false);  // 加载状态
    const [error, setError] = useState(null);           // 错误信息

    // useEffect 负责在 query 变化时发起 API 请求
    useEffect(() => {
        // 如果 query 为空，则不发起请求，并清空结果
        if (!query) {
            setPosts([]);
            return;
        }

        const fetchData = async () => {
            setIsLoading(true); // 开始加载
            setError(null);     // 清除之前的错误信息
            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();
                // 检查数据结构，确保recipes存在
                setPosts(jsonResponse.data?.recipes || []);
            } catch (err) {
                console.error("Failed to fetch recipes:", err);
                setError("无法加载食谱。请检查网络或稍后再试。"); // 用户友好的错误信息
                setPosts([]); // 错误时清空数据
            } finally {
                setIsLoading(false); // 结束加载
            }
        };

        fetchData();
    }, [query]); // 依赖项数组中包含 query，只有 query 变化时才重新运行此 effect

    // 使用 useCallback 优化输入框的 onChange 事件处理函数，避免不必要的重新创建
    const handleInputChange = useCallback((e) => {
        setSearchInput(e.target.value);
    }, []);

    // 使用 useCallback 优化表单的 onSubmit 事件处理函数
    const handleFormSubmit = useCallback((e) => {
        e.preventDefault(); // 阻止表单的默认提交行为（页面刷新）
        setQuery(searchInput); // 更新 query 状态，这将触发上面的 useEffect
    }, [searchInput]); // 依赖 searchInput，确保在提交时获取到最新的输入值

    // 根据状态渲染食谱列表
    const recipesDisplay = posts.length > 0 ? (
        posts.map((response) => (
            <div key={response.id} className="list-group-item">
                <img src={response.image_url} alt={response.title} />
                <h3>{response.title}</h3>
                <p>By: {response.publisher}</p>
            </div>
        ))
    ) : (
        // 根据不同状态显示不同的提示信息
        query && !isLoading && !error && <p>未找到关于 "{query}" 的食谱。请尝试其他搜索词！</p>
    );

    return (
        <div className="main">
            <h1>Recipes</h1>
            <form onSubmit={handleFormSubmit}> {/* 绑定 onSubmit 事件 */}
                <input
                    type="search"
                    placeholder="Search here"
                    onChange={handleInputChange}
                    value={searchInput} // 受控组件
                />
                <button type="submit" disabled={isLoading}> {/* 禁用按钮在加载时 */}
                    {isLoading ? "搜索中..." : "提交"}
                </button>
            </form>

            <div className="recipes-list">
                {isLoading && <p>正在加载食谱...</p>}
                {error && <p className="error-message">{error}</p>}
                {recipesDisplay}
            </div>
        </div>
    );
}