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 (将#修改为@）