如何解决ReactJs:TypeError:无法读取未定义的属性“长度”?
在这里,我正在尝试建立一个餐厅网站。我已经构建了它的一半。但我在某个时候卡住了。我收到错误。我无法在我的代码中找出问题所在。每当我尝试重新加载页面时,我都会收到 TypeError: Cannot read property 'length' of undefined?有时未定义购物车。我尝试了很多次,但多次遇到相同的错误。有人可以看看吗?
这是 App.js 文件
import logo from './logo.svg';
import {
browserRouter as Router,Switch,Route,Link
} from "react-router-dom";
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Banner from './components/Banner/Banner';
import Header from './components/Header/Header';
import Foods from './components/Foods/Foods';
import Features from './components/Features/Features';
import Footer from './components/Footer/Footer';
// import SIgnUp from './components/SignUp/SIgnUp';
import NotFound from './components/NotFound/NotFound';
import FoodItemDetails from './components/FoodItemDetails/FoodItemDetails'
import { createContext,useContext,useState } from 'react';
import Login from './components/Login/Login';
export const userContext = createContext();
function App() {
const [cart,setCart] = useState([]);
const [orderId,setorderId] = useState(null);
const [deliveryDetails,setDeliveryDetails] = useState({
todoor:null,road:null,flat:null,businessname:null,address: null
});
const [userEmail,setUserEmail] = useState(null);
const deliveryDetailsHandler = (data) => {
setDeliveryDetails(data)
}
const getUserEmail = (email) => {
setUserEmail(email);
}
const clearCart = () => {
const orderedItems = cart.map(cartItem => {
return {food_id : cartItem.id,quantity: cartItem.quantity}
})
const orderDetailsData = { userEmail,orderedItems,deliveryDetails }
fetch('https://red-onion-backend.herokuapp.com/submitorder',{
method : "POST",headers: {
"Content-type" : "application/json"
},body : JSON.stringify(orderDetailsData)
})
.then(res => res.json())
.then(data=> setorderId(data._id))
console.log(orderId);
setCart([])
}
const cartHandler = (data) => {
const alreadyAdded = cart.find(crt => crt.id == data.id );
const newCart = [...cart,data]
setCart(newCart);
if(alreadyAdded){
const reamingCarts = cart.filter(crt => cart.id != data);
setCart(reamingCarts);
}else{
const newCart = [...cart,data]
setCart(newCart);
}
}
const checkOutItemHandler = (productId,productQuantity) => {
const newCart = cart.map(item => {
if(item.id == productId){
item.quantity = productQuantity;
}
return item;
})
const filteredCart = newCart.filter(item => item.quantity > 0)
setCart(filteredCart)
}
const [logggedInUser,setLoggedInUser] = useState({});
const [signOutUser,setSignOutUser] = useState({});
return (
<userContext.Provider value={([logggedInUser,setLoggedInUser],[signOutUser,setSignOutUser])}>
<Router>
<div className="App">
<Switch>
<Route exact path="/">
<Header></Header>
<Banner></Banner>
<Foods></Foods>
<Features></Features>
<Footer></Footer>
</Route>
<Route path="/user">
<Login></Login>
</Route>
<Route path= "/food/:id">
<Header cart={cart}></Header>
{/* <FoodItemDetails cart={cart} cartHandler={cartHandler}></FoodItemDetails> */}
<FoodItemDetails cart={cart} cartHandler={cartHandler}></FoodItemDetails>
<Footer></Footer>
</Route>
<Route path ="*">
<NotFound></NotFound>
</Route>
</Switch>
</div>
</Router>
</userContext.Provider>
);
}
这里是 Header.js 文件
import React,{ useContext,useState } from 'react';
import logo from '../../Images/logo2.png';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCartArrowDown } from '@fortawesome/free-solid-svg-icons';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import './Header.css'
import { Link,useHistory } from 'react-router-dom';
import { userContext } from '../../App';
const Header = (props) => {
// const [cart,setCart] = useState([]);
console.log(props,"tusar");
const history = useHistory();
const handleLoginRoute = () => {
history.push("/user");
};
const [loggedInUser,setLoggedInUser] = useContext(userContext);
return (
<nav className="navbar navbar-expand navbar-light bg-white fixed-top">
<div className="container">
<div className="navbar-brand">
<img src={logo} alt=""/>
</div>
<Link to="/checkout">
<ul className="navbar-nav cart-icon">
<li className="nav-item"><FontAwesomeIcon className="cart-icon" icon={faCartArrowDown}><span className="badge bg-light">{ props.cart.length}</span></FontAwesomeIcon></li>
</ul>
</Link>
{loggedInUser.isSignedIn ?
<button className="btn btn-rounded btn-danger ">Sign out</button>
:
<div className="main-btn">
<button className="btn tg-primary login-btn" onClick={handleLoginRoute}>
Login
</button>
<button className="btn btn-rounded btn-danger sign-up-btn" onClick={handleLoginRoute}>Sign Up</button>
</div>
}
{loggedInUser.isSignedIn && (
<div className="user-icon">
<FontAwesomeIcon icon={faArrowRight}></FontAwesomeIcon>
{loggedInUser.name ? loggedInUser.name.split(" ") : "User"}{" "}
</div>
)}
</div>
</nav>
);
};
export default Header;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。