javascript - ReactJs：TypeError：无法读取未定义的属性“长度”？

Question

在这里，我正在尝试建立一个餐厅网站。我已经构建了它的一半。但我被困在某个时刻。我收到错误。我无法在我的代码中找出问题所在。每当我尝试重新加载页面时，我都会收到 TypeError：无法读取未定义的属性“长度”？有时购物车没有定义。我尝试了很多次，但多次遇到相同的错误。有人可以检查一下吗？

这是 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;

标签： javascriptreactjsjavascript-objects