解决 React 组件导入与渲染问题：以标题和页脚为例

*import Title from './Title';*

import ComponentName from 'path/to/ComponentFile';

// 错误的导入方式
// *import Title from './Title';*

// 正确的导入方式
import Title from './Title';

import React, { useState } from 'react';
import "./App.css";
import Axios from 'axios';
import Recipe from './components/Recipe';
import { v4 as uuidv4 } from "uuid";
import Alert from './components/Alert';
import Footer from './footer';
import Title from './Title'; // 修正后的Title组件导入

const App = () => {
    const [query, setQuery] = useState("");
    const [recipes, setRecipes] = useState([]);
    const [alert, setAlert] = useState("");

    const APP_ID = "4e9f05eb";
    const APP_KEY = "9b904d703fa0d46a88ce1ac63f29f498";

    const url = `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`;

    const getData = async () => {
        if (query !== "") {
            const result = await Axios.get(url);
            if (!result.data.more) {
                return setAlert("No food with such name");
            }
            setRecipes(result.data.hits);
            console.log(result);
            // setQuery = (""); // 注意：这里原代码有误，应为 setQuery("")
            setQuery(""); // 清空查询输入
            setAlert("");
        } else {
            setAlert("Please fill the form");
        }
    };

    const onChange = (e) => {
        setQuery(e.target.value);
    };

    const onSubmit = e => {
        e.preventDefault();
        getData();
    };

    return (
        <div className="App">
            <Title /> {/* 在页面顶部使用Title组件 */}
            <h1>Recipe Search API</h1>
            <form className="search-form" onSubmit={onSubmit}>
                {alert !== "" && <Alert alert={alert} />}
                <input
                    type="text"
                    placeholder="Search Food"
                    autoComplete="off"
                    onChange={onChange}
                    value={query}
                />
                <input type="submit" value="search" />
            </form>
            <div className="recipes">
                {recipes.length > 0 &&
                    recipes.map(recipe => <Recipe key={uuidv4()} recipe={recipe} />)}
            </div>
            <Footer /> {/* 在页面底部使用Footer组件 */}
        </div>
    );
}

export default App;

import React from 'react';

const Title = () => {
    return (
        <div className="title container">
            <div className="border rounded m-3 p-5 shadow bg-warning">
                <h1 className="display-1 p-3">Recipe Search API</h1>
                <h3 className="lead">
                    Welcome to my recipe searching website! This website uses the Edamam recipe API which has the data of tens of thousands of foods, including international dishes.
                    <br />
                    Enter <strong>ANY</strong> sort of food <strong>OR</strong> whatever suits your palate to see its magic.
                    <span className="spinner-grow spinner-grow-sm"> </span>
                </h3>
            </div>
        </div>
    );
}

export default Title;

import React from 'react';

const Footer = () => {
    return (
        <div className="text-center py-3 text-warning">
            &copy; {new Date().getFullYear()} Kailas Kurup: Thanks for visiting my page :)
        </div>
    );
}

export default Footer;