Javascript 如何创建订单摘要组件

我想在右侧创建一个订单摘要组件，如下所示：

然而，我不知道该怎么做，因为我对MERN stack还很陌生。这是餐厅详细信息显示方式的组件：

从React导入React，{useState，useffect}； 从react redux导入{useDispatch，useSelector}； 从@material ui/core导入{Grid，CircularProgress}； 从./styles导入useStyles； 从路由器dom导入{useParams}； 从.././actions/restaurantDetails导入{restaurantDetails}； 从@material ui/core导入{TextField、按钮、排版、纸张}； 从@material ui/core导入{LinearProgress}； 从react引导导入{容器，行，列}； 导入bootstrap/dist/css/bootstrap.css； 从导入OrderSummary。/OrderSummary/OrderSummary； const RestaurantDetails=道具=>{ 常量类=使用样式； const dispatch=usedpatch； 设{u id}=useParams； const[restaurantInfo，setRestaurantInfo]=useState； useEffect=>{ 试一试{ dispatchrestaurantDetails_id.thenres=>SetRestaurantFores； console.log这是restaurantInfo+restaurantInfo； console.log_id； }抓住e{ 控制台错误； } }，[调度]； 回来！餐厅？ : ; { } {restaurantInfo.name} {restaurantInfo.categoryname1} {restaurantInfo.categoryname2} {restaurantInfo.itemName11}

此处的描述

英镑{restaurantInfo.itemPrice11} 增加订单 {restaurantInfo.itemName12}

此处的描述

英镑{restaurantInfo.itemPrice12} 增加订单 {restaurantInfo.itemName21}

此处的描述

英镑{restaurantInfo.ItemPrice 21} 增加订单 {restaurantInfo.itemName22}

此处的描述

英镑{restaurantInfo.itemPrice22} 增加订单 // //餐厅id为：{u id} //餐厅名称为：{restaurantInfo.name} // ; };

---

导出默认餐厅详细信息 您需要在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;

“添加到订单”按钮需要一个onClick处理程序来调度您的操作

<Button
  variant="contained"
  color="secondary"
  onClick={() => dispatch(addToOrder({
    name: restaurantInfo.itemName12, 
    price: restaurantInfo.itemPrice12
  }))}
>
  Add To Order
</Button>

---

作为旁注，您可能不应该在组件状态下存储restaurantInfo，因为它似乎已经在redux中设置好了。相反，你应该使用useSelector来访问它。

嗨，琳达，我尝试过实现它，但不幸的是，它不起作用：当用户单击“添加到订单”按钮时，如果你可以发布一个代码沙盒或其他我可以查看的东西，则不会执行任何操作。

const orderItems = useSelector(state => state.order.items);
const orderTotal = orderItems.reduce((total, item) => total + item.price, 0);