Javascript ReactJs:TypeError:无法读取属性'；长度'；未定义的？
在这里，我试图建立一个餐厅网站。我已经建了一半了。但我在某一点上被卡住了。我犯了个错误。我无法从我的代码中找出错误。每当我尝试重新加载页面时，我都会收到TypeError:无法读取未定义的属性“length”？有时购物车没有定义。我试了很多次，但都犯了很多同样的错误。请有人检查一下好吗 这是App.js文件Javascript ReactJs:TypeError:无法读取属性'；长度'；未定义的？,javascript,reactjs,javascript-objects,Javascript,Reactjs,Javascript Objects,在这里，我试图建立一个餐厅网站。我已经建了一半了。但我在某一点上被卡住了。我犯了个错误。我无法从我的代码中找出错误。每当我尝试重新加载页面时，我都会收到TypeError:无法读取未定义的属性“length”？有时购物车没有定义。我试了很多次，但都犯了很多同样的错误。请有人检查一下好吗 这是App.js文件 import logo from './logo.svg'; import { BrowserRouter as Router, Switch, Route, Link }
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>
);
}
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;
从“/logo.svg”导入徽标；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
导入“/App.css”；
导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”
从“./components/Banner/Banner”导入横幅；
从“./components/Header/Header”导入标题；
从“./组件/食品/食品”进口食品；
从“./components/Features/Features”导入要素；
从“./components/Footer/Footer”导入页脚；
//从“./components/SIgnUp/SIgnUp”导入注册；
从“./components/NotFound/NotFound”导入NotFound；
从“./components/FoodItemDetails/FoodItemDetails”导入FoodItemDetails
从“react”导入{createContext，useContext，useState}；
从“./components/Login/Login”导入登录名；
export const userContext=createContext（）；
函数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=（数据）=>{
setDeliveryDetails（数据）
}
const getUserEmail=（email）=>{
setUserEmail（电子邮件）；
}
常量clearCart=（）=>{
const orderedItems=cart.map（cartItem=>{
返回{food_id:cartItem.id，数量：cartItem.quantity}
})
const orderDetailsData={userEmail、orderedItems、deliveryDetails}
取（'https://red-onion-backend.herokuapp.com/submitorder' , {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（orderDetailsData）
})
.then（res=>res.json（））
.then（data=>setOrderId（data.\u id））
log（orderId）；
setCart（[]）
}
常量cartHandler=（数据）=>{
const alreadyAdded=cart.find（crt=>crt.id==data.id）；
const newCart=[…购物车，数据]
setCart（newCart）；
如果（已添加）{
const reamingCarts=cart.filter（crt=>cart.id！=数据）；
setCart（铰孔车）；
}否则{
const newCart=[…购物车，数据]
setCart（newCart）；
}
}
const checkOutItemHandler=（productId，productQuantity）=>{
const newCart=cart.map（项=>{
如果（item.id==productId）{
item.quantity=产品数量；
}
退货项目；
})
常量filteredCart=newCart.filter（item=>item.quantity>0）
setCart（过滤部分）
}
const[logggedInUser，setLoggedInUser]=useState（{}）；
const[signOutUser，setSignOutUser]=useState（{}）；
返回(
{/* */}
);
}
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>
);
}
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;
import React，{useContext，useState}来自“React”；
从“../../Images/logo2.png”导入徽标；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortawesome/free solid svg icons”导入{faCartArrowDown}；
从“@fortawesome/free solid svg icons”导入{faArrowRight}；
导入“./Header.css”
从“react router dom”导入{Link，useHistory}；
从“../../App”导入{userContext}；
常数头=（道具）=>{
//const[cart，setCart]=useState（[]）；
控制台日志（道具，“tusar”）；
const history=useHistory（）；
常量handleLoginRoute=（）=>{
history.push（“/user”）；
};
const[loggedInUser，setLoggedInUser]=useContext（userContext）；
返回(
- {props.cart.length}
{loggedInUser.isSignedIn？
退出
:
登录
注册
}
{loggedInUser.isSignedIn&&(
{loggedInUser.name？loggedInUser.name.split（“”：“用户”}{“}”
)}
);
};
导出默认标题；
标题中，这正是您的代码所期望的。问题已解决，但每当我单击添加的按钮时，我都会在console.log中将其签出，但它不会显示在网站标题中。问题已解决。。谢谢