React表单输入与API请求：解决数据不更新和页面刷新问题

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

const key = 'API_KEY';

export default function Recipes() {
    const [posts, setPosts] = useState([]);
    const [searchInput, setSearchInput] = useState("");

    const recipesDisplay = posts?.map((response, i) => (
        <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>
    ));

    const handleChange = (e) => {
        e.preventDefault(); // 此处阻止的是输入框的默认行为，而非表单提交
        setSearchInput(e.target.value);
    };

    // 错误：useEffect 不应放在嵌套函数中
    const ShowPosts = () => {
        useEffect( () => { 
            async function fetchData() {
                try {
                    const response = await fetch(`https://forkify-api.herokuapp.com/api/v2/recipes?search=${searchInput}&key=${key}`); 
                    if (response.ok) {
                        const jsonResponse = await response.json();
                        console.log(searchInput);
                        setPosts(jsonResponse.data.recipes);
                        console.log(jsonResponse);
                    }                    
                } catch (err) {
                    console.error("Failed to fetch recipes:", err); // 使用 console.error
                }
            }
            fetchData();
        }, []); // 依赖数组为空，意味着只在组件挂载时运行一次，不会响应 searchInput 变化
    }

    return (
        <div className="main">
            <h1>Recipes</h1>
            <form> {/* 表单提交的默认行为是刷新页面 */}
                <input
                        type="search"
                        placeholder="Search here"
                        onChange={handleChange}
                        value={searchInput}
                />
                <button onClick={handleChange}>Submit</button> {/* 按钮点击事件绑定错误 */}
            </form>

            {ShowPosts()} {/* 错误：在渲染函数中调用一个包含 useEffect 的函数 */}
            {recipesDisplay}
        </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 [searchTerm, setSearchTerm] = useState(""); // 新增一个状态用于触发API请求

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

    // 处理表单提交的函数
    const handleFormSubmit = (e) => {
        e.preventDefault(); // 阻止表单默认提交行为，防止页面刷新
        setSearchTerm(searchInput); // 将当前输入值设置为触发API请求的searchTerm
    };

    // 使用 useEffect 来触发 API 请求
    // 依赖项数组中包含 searchTerm，只有当 searchTerm 改变时，effect 才会重新运行
    useEffect(() => {
        if (!searchTerm) {
            // 如果 searchTerm 为空，则不执行 API 请求，例如在组件初次加载时
            // 或者可以设置为加载默认数据
            return;
        }

        async function fetchData() {
            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();
                console.log("Fetched search term:", searchTerm);
                console.log("API Response:", jsonResponse);
                setPosts(jsonResponse.data.recipes || []); // 确保即使没有结果也设置为[]
            } catch (err) {
                console.error("Failed to fetch recipes:", err);
                setPosts([]); // 请求失败时清空数据
            }
        }
        fetchData();
    }, [searchTerm]); // 依赖 searchTerm，当 searchTerm 变化时重新运行 effect

    // 渲染食谱列表
    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>
        ))
    ) : (
        <p>No recipes found. Try searching for something else!</p>
    );

    return (
        <div className="main">
            <h1>Recipes</h1>
            <form onSubmit={handleFormSubmit}> {/* 绑定表单提交事件 */}
                <input
                    type="search"
                    placeholder="Search here"
                    onChange={handleInputChange} // 绑定输入框变化事件
                    value={searchInput} // 受控组件
                />
                <button type="submit">Submit</button> {/* 按钮类型为 submit */}
            </form>

            <div className="recipes-list">
                {recipesDisplay}
            </div>
        </div>
    );
}