javascript - TypeError:path.split 不是函数出错?
问题描述
我正在尝试建立一个餐厅网站。我已经构建了它的一半。但我被困在某个时刻。我收到错误。我无法在我的代码中找出问题所在。每当我尝试通过单击添加按钮添加新食物时,它都会添加,但每当我单击购物车按钮结帐时,请访问结帐页面。然后我得到:
TypeError: path.split 不是函数?
我正在使用反应钩子形式。我尝试调试,但我多次遇到相同的错误。有人可以检查一下吗?
这是我的 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';
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;
这是我的 Shipment.js 文件
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;
这是错误
TypeError:path.split 不是函数
get
T:/1.Full-Stack-Developer/5.React/3.Red Onion/src/utils/get.ts:6
3 | import isUndefined from './isUndefined';
4 |
5 | export default (obj: any = {}, path: string, defaultValue?: unknown) => {
> 6 | const result = compact(path.split(/[,[\].]+?/)).reduce(
7 | (result, key) => (isNullOrUndefined(result) ? result : result[key]),
8 | obj,
9 | );
renderWithHooks T:/1.Full-Stack-Developer/5.React/3.Red Onion/red-onion-resturant/node_modules/react-dom/cjs/react-dom.development.js:14985
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">
解决方案
- array.compact() 方法不起作用,您也不能声明变量结果,然后稍后将其作为累加器传递。
- 试试这样写:
export default (obj: any = {}, path: string, defaultValue?: unknown) => {
return path.split(/[,[\].]+?/).reduce((result, key) => (
isNullOrUndefined(result) ? result : result[key]
), obj)
}
推荐阅读
- elasticsearch - ElasticSearch 中有没有办法在顶部获得最短(最近)的单词?
- ms-access - SQL 注入和访问宏(不是 VBA)
- r - 如何将谷歌 API 密钥传递给 get_maps?
- node.js - 如果失败,猫鼬订购的 Model.insertMany 是否会向数据库写入任何内容?
- python - 计算矩阵的特征值作为参数的函数
- java - 是否可以在 Spring Boot 中解析依赖 JAR 文件的 REST 端点
- javascript - 带有动态引导菜单的 reactJS
- html - 将 font-awsome 链接到 amp 页面
- active-directory - Write requests are only supported on contained entities, Microsoft Graph API when trying to PATCH/POST to assign AD App role to user
- javascript - 给定 ES6 中没有循环的初始对象列表,如何构建一个新的对象列表,每个对象都有一个新属性?