Javascript TypeError:path.split不是函数获取错误？
我正在尝试建立一个餐厅网站。我已经建了一半了。但我在某一点上被卡住了。我有错误。我无法从我的代码中找出错误。每当我试图通过单击“添加”按钮添加新食物时，它都会添加，但每当我单击购物车按钮结帐时，都会访问结帐页面。然后我得到： TypeError:path.split不是函数 我用的是钩形。我尝试过调试，但多次都出现相同的错误。请有人检查一下好吗 这是我的App.js文件Javascript TypeError:path.split不是函数获取错误？,javascript,reactjs,dom-events,Javascript,Reactjs,Dom Events,我正在尝试建立一个餐厅网站。我已经建了一半了。但我在某一点上被卡住了。我有错误。我无法从我的代码中找出错误。每当我试图通过单击“添加”按钮添加新食物时，它都会添加，但每当我单击购物车按钮结帐时，都会访问结帐页面。然后我得到： TypeError:path.split不是函数 我用的是钩形。我尝试过调试，但多次都出现相同的错误。请有人检查一下好吗 这是我的App.js文件 import logo from './logo.svg'; import { BrowserRouter as Rout
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';
import PrivateRoute from './components/PrivateRoute/PrivateRoute';
import Shipment from './components/Shipment/Shipment';
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 cart={cart}></Header>
<Banner></Banner>
<Foods cart={cart}></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>
<PrivateRoute path="/checkout">
<Header cart={cart}></Header>
<Shipment deliveryDetails={deliveryDetails} deliveryDetailsHandler={deliveryDetailsHandler} cart={cart} clearCart={clearCart} checkOutItemHandler={checkOutItemHandler} getUserEmail={getUserEmail}>
</Shipment>
<Footer></Footer>
</PrivateRoute>
<Route path ="*">
<NotFound></NotFound>
</Route>
</Switch>
</div>
</Router>
</userContext.Provider>
);
}
export default App;
import React from 'react';
import { useForm } from 'react-hook-form';
import { Link } from 'react-router-dom';
const Shipment = (props) => {
const { register, handleSubmit, watch, errors } = useForm();
const onSubmit = data => {
props.deliveryDetailsHandler(data);
// props.getUserEmail(auth.user.email);
};
const { todoor, road, flat, businessname, address} = props.deliveryDetails;
const subTotal = props.cart.reduce((acc,crr) => {
return acc + (crr.price * crr.quantity) ;
},0)
const totalQuantity = props.cart.reduce((acc,crr) => {
return acc + crr.quantity ;
},0)
const tax = (subTotal / 100) * 5;
const deliveryFee = totalQuantity && 2;
const grandTotal = subTotal + tax + deliveryFee;
return (
<div className="shipment container pt-5 my-5">
<div className="row">
<div style={{display:(todoor && road && flat && businessname && address) ? "none" : "block"}} className="col-md-5">
<h4>Edit Delivery Details</h4>
<hr/>
<form onSubmit={handleSubmit(onSubmit)} className="py-5">
<div className="form-group">
<input name="todoor" className="form-control" {...register( {requried: true})} defaultValue={todoor} placeholder="Delivery To Door"/>
{errors && errors.todoor && <span className="error">This Option is required</span>}
</div>
<div className="form-group">
<input name="road" className="form-control" {...register( {requried: true})} defaultValue={road} placeholder="Road No"/>
{errors && errors.road && <span className="error">Road No is required</span>}
</div>
<div className="form-group">
<input name="flat" className="form-control" {...register( {requried: true})} defaultValue={flat} placeholder="Flat, Suite or Floor"/>
{errors && errors.flat && <span className="error">Flat, Suite or Floor is required</span>}
</div>
<div className="form-group">
<input name="businessname" className="form-control" {...register( {requried: true})} defaultValue={businessname} placeholder="Business name"/>
{errors && errors.businessname && <span className="error">Business name is required</span>}
</div>
<div className="form-group">
<textarea name="address" {...register( {requried: true})} placeholder="Address" className="form-control" cols="30" rows="2">{address}</textarea>
{errors.address && <span className="error">Password is required</span>}
</div>
<div className="form-group">
<button className="btn btn-danger btn-block" type="submit">Save & Continue</button>
</div>
</form>
</div>
<div style={{display:(todoor && road && flat && businessname && address) ? "block" : "none"}} className="col-md-5">
{/* <Elements stripe={stripePromise}>
<Payment markAsPaid={markAsPaid}/>
</Elements> */}
</div>
<div className="offset-md-2 col-md-5">
<div className="restaurant-info mb-5">
<h4>Form <strong> Star Kabab And Restaura</strong></h4>
<h5>Arriving in 20-30 min</h5>
<h5>107 Rd No 9</h5>
</div>
{
props.cart.map(item =>
<div className="single-checkout-item mb-3 bg-light rounded d-flex align-items-center justify-content-between p-3">
<img width="100px" src={item.images[0]} alt=""/>
<div>
<h6>{item.name}</h6>
<h4 className="text-danger">${item.price.toFixed(2)}</h4>
<p>Delivery free</p>
</div>
<div className="checkout-item-button ml-3 btn">
<button onClick={() => props.checkOutItemHandler(item.id, (item.quantity+1)) } className="btn font-weight-bolder">+</button>
<button className="btn bg-white rounded">{item.quantity}</button>
{
item.quantity > 0 ?
<button className="btn font-weight-bolder" onClick={() => props.checkOutItemHandler(item.id, (item.quantity -1) )}>-</button>
:
<button disabled className="btn font-weight-bolder">-</button>
}
</div>
</div>
)
}
<div className="cart-calculation">
<p className="d-flex justify-content-between"><span>Sub Total . {totalQuantity} Item</span> <span>${subTotal.toFixed(2)}</span></p>
<p className="d-flex justify-content-between"><span>Tax</span> <span>${tax.toFixed(2)}</span></p>
<p className="d-flex justify-content-between"><span>Delivery Fee</span> <span>${deliveryFee}</span></p>
<p className="h5 d-flex justify-content-between"><span>Total</span> <span>${grandTotal.toFixed(2)}</span></p>
{/* {
totalQuantity ?
paid?
<Link to="/order-complete">
<button onClick={() => props.clearCart()} className="btn btn-block btn-danger btn-secondary">Check Out Your Food</button>
</Link>
:
<button disabled className="btn btn-block btn-secondary">Check Out Your Food</button>
:
<button disabled className="btn btn-block btn-secondary">Nothing to Checkout</button>
} */}
</div>
</div>
</div>
</div>
//
// <div className="shipment container">
// <h1>This is shipment</h1>
// <div className="row">
// <div className="">
// <h4>Edit Delivery Details</h4>
// <hr/>
// <form action="" className="py-5">
// <div className="form-group">
// <input type="text" name="todoor" className="form-control" ref={register({required: true})} defaultValue={todoor} placeholder="Delver to door" />
// {errors && errors.todoor && <span className="error">This Option is required</span>}
// </div>
// <div className="form-group">
// <input type="text" name="road" className="form-control" ref={register({required: true})} defaultValue={road} placeholder="Road No" />
// {errors && errors.road && <span className="error">This Option is required</span>}
// </div>
// <div className="form-group">
// <input type="text" name="flat" className="form-control" ref={register({required: true})} defaultValue={flat} placeholder="Flat, Suit Or Floor" />
// {errors && errors.flat && <span className="error">This Option is required</span>}
// </div>
// <div className="form-group">
// <input type="text" name="business" className="form-control" ref={register({required: true})} defaultValue={business} placeholder="Business Name" />
// {errors && errors.todoor && <span className="error">This Option is required</span>}
// </div>
// <div className="form-group">
// <input type="text" name="address" className="form-control" ref={register({required: true})} defaultValue={address} placeholder="Address" />
// {errors && errors.address && <span className="error">This Option is required</span>}
// </div>
// <div className="form-group">
// <button className="btn btn-danger">Save and Continue</button>
// </div>
// </form>
// </div>
// </div>
// </div>
);
};
export default Shipment;
29 | <form onSubmit={handleSubmit(onSubmit)} className="py-5">
30 |
31 | <div className="form-group">
> 32 | <input className="form-control" {...register( {requried: true})} defaultValue={todoor} placeholder="Delivery To Door"/>
| ^ 33 | {errors && errors.todoor && <span className="error">This Option is required</span>}
34 | </div>
35 | <div className="form-group">
29|
30 |
31 |
> 32 |
|^33{errors&&errors.todoor&&This选项是必需的}
34 |
35 |
- array.compact（）方法不起作用，也不能声明 变量结果，然后将其作为累加器传递
- 试着这样写：
可能是我的问题是shipping.js文件。在反应钩形式内
29 | <form onSubmit={handleSubmit(onSubmit)} className="py-5">
30 |
31 | <div className="form-group">
> 32 | <input className="form-control" {...register( {requried: true})} defaultValue={todoor} placeholder="Delivery To Door"/>
| ^ 33 | {errors && errors.todoor && <span className="error">This Option is required</span>}
34 | </div>
35 | <div className="form-group">
export default (obj: any = {}, path: string, defaultValue?: unknown) => {
return path.split(/[,[\].]+?/).reduce((result, key) => (
isNullOrUndefined(result) ? result : result[key]
), obj)
}