老师，如果不是直接清空整个购物车，而是只删除其中一个product呢？

来源：12-4 【Redux创建】购物车 Slice

慕函数5296017

2021-06-21

老师如果不是直接清空整个购物车，而是只删除其中一个product呢，shoppingcartslice应该是怎么写呢？应该模仿addcartitem 还是clearitem呢，能不能帮忙看看这样对不对？
ShoppingCartslice.ts
export const deleteShoppingCartItem = createAsyncThunk(
“shoppingCart/deleteShoppingCartItem”,
async (parameters: { jwt: string; touristRouteId: string }, thunkAPI) => {
const { data } = await axios.delete(
http://123.56.149.216:8080/api/shoppingCart/items/{touristRouteId},//因为没有这个backend api，随便写的
{
touristRouteId: parameters.touristRouteId,
},
{
headers: {
Authorization: bearer ${parameters.jwt},
},
}
);
return data.shoppingCartItems;
}
);

写回答

1回答

阿莱克斯刘

2021-06-22

课程的后端实际上实现了单条旅游路线删除的api，基本上就是类似你问题中代码所写的方法来进行删除，与addcartitem api类似，只不过添加是post、删除是delete。

但是请注意，api中的参数id指的是shoppingCartItem ID而不是touristRouteId，shoppingCartItem ID可以在获得shoppingCart列表api的返回数据中找到。

以下是curl的例子

curl --location --request DELETE 'http://123.56.149.216:8080/api/shoppingCart/items/{shoppingCartItemID}' \
--header 'Authorization: bearer {你的token}' \
--header 'x-icode: {icode代码}'

阿莱克斯刘

慕函数5296017

hi 同学，如果只是删除mock数据中的某一项，可以考虑使用for循环或者find函数找到该数据的index位置，然后使用slice函数把数组切段，去掉index对应的数据，然后把两端的数据重新拼接起来。请注意，根据immutable（不可更改）原则，提交给redux的数组必须是全新创建的数组。你的思路基本上是正确的。

2021-06-25

共2条回复

React18 系统精讲结合TS打造旅游电商平台