import React, { useEffect, useState } from 'react'
import Card from '../components/Card'
// import Carousel from '../components/Carousel'
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
export default function Home() {
const [foodCat, setFoodCat] = useState([])
const [foodItems, setFoodItems] = useState([])
const [search, setSearch] = useState('')
const loadFoodItems = async () => {
let response = await fetch("https://meal-express-backend.vercel.app/api/auth/foodData", {
// credentials: 'include',
// Origin:"http://localhost:3000/login",
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
response = await response.json()
// console.log(response[1][0].CategoryName)
setFoodItems(response[0])
setFoodCat(response[1])
}
useEffect(() => {
loadFoodItems()
}, [])
return (
<div >
<div>
<Navbar />
</div>
<div>
<div id="carouselExampleFade" className="carousel slide carousel-fade " data-bs-ride="carousel">
<div className="carousel-inner " id='carousel'>
<div className=" carousel-caption " style={{ zIndex: "9" }}>
<div className=" d-flex justify-content-center"> {/* justify-content-center, copy this <form> from navbar for search box */}
<input className="form-control me-2 w-75 bg-white text-dark" type="search" placeholder="Search in here..." aria-label="Search" value={search} onChange={(e) => { setSearch(e.target.value) }} />
<button className="btn text-white bg-danger" onClick={() => { setSearch('') }}>X</button>
</div >
</div >
<div className="carousel-item active" >
<img src="https://source.unsplash.com/random/900x700/?burger" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
</div>
<div className="carousel-item">
<img src="https://source.unsplash.com/random/900x700/?pastry" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
</div>
<div className="carousel-item">
<img src="https://source.unsplash.com/random/900x700/?barbeque" className="d-block w-100 " style={{ filter: "brightness(30%)" }} alt="..." />
</div>
</div >
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div >
</div >
<div className='container'> {/* boootstrap is mobile first */}
{
foodCat !== []
? foodCat.map((data) => {
return (
// justify-content-center
<div className='row mb-3'>
<div key={data.id} className='fs-3 m-3'>
{data.CategoryName}
</div>
<hr id="hr-success" style={{ height: "4px", backgroundImage: "-webkit-linear-gradient(left,rgb(0, 255, 137),rgb(0, 0, 0))" }} />
{foodItems !== [] ? foodItems.filter(
(items) => (items.CategoryName === data.CategoryName) && (items.name.toLowerCase().includes(search.toLowerCase())))
.map(filterItems => {
return (
<div key={filterItems.id} className='col-12 col-md-6 col-lg-3'>
{console.log(filterItems.url)}
<Card foodName={filterItems.name} item={filterItems} options={filterItems.options[0]} ImgSrc={filterItems.img} ></Card>
</div>
)
}) : <div> No Such Data </div>}
</div>
)
})
: ""}
</div>
<Footer />
</div >
)
}
任何人都可以修复错误…
This is the error
请修复这个错误,每当我打开我的网站https://meal-express-phda.vercel.app/这个错误来,修复代码,并重新编写正确的代码...
请修复这个错误,每当我打开我的网站https://meal-express-phda.vercel.app/这个错误来,修复代码,并重新编写正确的代码...
1条答案
按热度按时间nx7onnlm1#
此问题与
foodCat !== []
条件有关。尝试将条件更改为:
这将解决这个问题。