如何使我的標題和頁腳在我的網頁上可見？

Question

APP.JS (down below)  

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';*

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 = ("");
 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 />
    <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 !== [] && 
     recipes.map(recipe=> <Recipe key={uuidv4
     ()} recipe={recipe} />)}
    </div>
      <Footer />
</div>
  );
}

export default App;

Title.js 

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></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;

footer.js 

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;

** 我正在嘗試使用 Edemam API 創建食譜搜索 API 網頁。 我只想在頁面底部添加一個帶有我的名字和一些詳細信息的頁腳，以及在頁面頂部添加一個標題以及 API 的簡短描述。 每當我嘗試導入頁腳和標題時，我都會遇到錯誤或網頁的反應（預覽）只是變成空白。 **

Answer 1

您在 App.js 中的標題導入在導入前后包含 * 符號，如下所示：

*import Title from './Title';*

將導入語句更改為以下應該顯示您的標題並刪除錯誤

import Title from './Title';