如何解决如何创建订单汇总组件
我想在右侧创建一个订单汇总组件,如下所示:How the UI looks
但是,我不知道该怎么做,因为我对 MERN 堆栈还很陌生。这是餐厅详细信息显示方式的组件:
import React,{ useState,useEffect } from "react";
import { usedispatch,useSelector } from "react-redux";
import { Grid,CircularProgress } from "@material-ui/core";
import useStyles from "./styles";
import { useParams } from "react-router-dom";
import { restaurantDetails } from "../../actions/restaurants";
import { TextField,Button,Typography,Paper } from "@material-ui/core";
import { LinearProgress } from "@material-ui/core";
import { Container,Row,Col } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import OrderSummary from "./OrderSummary/OrderSummary";
const RestaurantDetails = (props) => {
const classes = useStyles();
const dispatch = usedispatch();
let { _id } = useParams();
const [restaurantInfo,setRestaurantInfo] = useState();
useEffect(() => {
try {
dispatch(restaurantDetails(_id)).then((res) => setRestaurantInfo(res));
console.log("this is restaurantInfo" + restaurantInfo);
console.log(_id);
} catch (e) {
console.error(e);
}
},[dispatch]);
return !restaurantInfo ? (
<CircularProgress />
) : (
<Container>
<LinearProgress variant="determinate" value="20" color="secondary" />;
<Row>
<Col sm={8}>
{" "}
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>{restaurantInfo.name} </Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>{restaurantInfo.categoryname1}</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>{restaurantInfo.categoryname2}</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<div className="">
<img alt="" className="" src="images/3981417.jpg" />
<div className="">
<div className="">
<h3 className="">{restaurantInfo.itemName11}</h3>
<p className="">description here</p>
<h6 className="">£{restaurantInfo.itemPrice11}</h6>
<Button variant="contained" color="secondary">
Add To Order
</Button>
</div>
</div>
</div>
</Grid>
<Grid item xs={6} sm={3}>
<div className="">
<img alt="" className="" src="images/3981417.jpg" />
<div className="">
<div className="">
<h3 className="">{restaurantInfo.itemName12}</h3>
<p className="">description here</p>
<h6 className="">£{restaurantInfo.itemPrice12}</h6>
<Button variant="contained" color="secondary">
Add To Order
</Button>
</div>
</div>
</div>
</Grid>
<Grid item xs={6} sm={3}>
<div className="">
<img alt="" className="" src="images/3981417.jpg" />
<div className="">
<div className="">
<h3 className="">{restaurantInfo.itemName21}</h3>
<p className="">description here</p>
<h6 className="">£{restaurantInfo.itemPrice21}</h6>
<Button variant="contained" color="secondary">
Add To Order
</Button>
</div>
</div>
</div>
</Grid>
<Grid item xs={6} sm={3}>
<div className="">
<img alt="" className="" src="images/3981417.jpg" />
<div className="">
<div className="">
<h3 className="">{restaurantInfo.itemName22}</h3>
<p className="">description here</p>
<h6 className="">£{restaurantInfo.itemPrice22}</h6>
<Button variant="contained" color="secondary">
Add To Order
</Button>
</div>
</div>
</div>
</Grid>
</Grid>
</div>
</Col>
<OrderSummary />
</Row>
</Container>
// <div>
// <h2>Restaurant id is: {_id}</h2>
// <h2>Restaurant name is: {restaurantInfo.name}</h2>
// </div>
);
};
export default RestaurantDetails;
这是目前的订单汇总组件。显然,我想在添加时显示商品名称和价格以便结帐
import React,CircularProgress } from "@material-ui/core";
import useStyles from "./styles";
import { Row,Col } from "react-bootstrap";
import { TextField,Paper } from "@material-ui/core";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import CardActions from "@material-ui/core/CardActions";
import { Divider } from "@material-ui/core";
import "bootstrap/dist/css/bootstrap.css";
const OrderTotal = () => {
const classes = useStyles();
return (
<div>
<Col sm={4}>
{" "}
<Card className={classes.root}>
<CardHeader title="Order Summary" className={classes.header} />
<Divider variant="middle" />
<CardContent>
<div className={classes.list}>
<Row>
<Col sm={6}>
<Typography align="center">display Item</Typography>
</Col>
<Col sm={6}>
<Typography align="center">display Prices</Typography>
</Col>
</Row>
</div>
</CardContent>
<Divider variant="middle" />
<CardActions className={classes.action}>
<Button variant="contained" color="primary" className={classes.button}>
Order Now
</Button>
</CardActions>
</Card>
</Col>
</div>
);
};
export default OrderTotal;
我该如何实现?我如何将价格和名称传递给订单汇总组件并在添加或删除它们时列出它们?我真的很感激,因为我似乎无法解决这个问题!
解决方法
您需要将当前购物车项目存储在 redux 状态。您将需要一个将商品添加到购物车的操作。您的减速器需要处理此操作并更新购物车数据。这是一个非常基本的实现:
const orderSlice = createSlice({
name: 'order',initialState: {
items: [],status: 'unsubmitted'
},reducers: {
addToOrder: (state,action) => {
state.items.push(action.payload);
},submitOrder: (state) => {
state.status = 'pending';
}
}
})
export const orderReducer = orderSlice.reducer;
export const {addToOrder,submitOrder} = orderSlice.actions;
您的“添加到订单”Button
需要一个 onClick
处理程序来调度您的操作。
<Button
variant="contained"
color="secondary"
onClick={() => dispatch(addToOrder({
name: restaurantInfo.itemName12,price: restaurantInfo.itemPrice12
}))}
>
Add To Order
</Button>
您的 OrderTotal
组件将使用 useSelector
钩子从 redux 访问购物车数据。
const orderItems = useSelector(state => state.order.items);
const orderTotal = orderItems.reduce((total,item) => total + item.price,0);
作为旁注,您可能不应该将 restaurantInfo
存储在您的组件状态中,因为它似乎已经在 redux 中设置了。相反,您应该使用 useSelector
访问它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。