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

Question

老师如果不是直接清空整个购物车，而是只删除其中一个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;
}
);

Answer 1

阿莱克斯刘 2021-06-22 00:44:28

课程的后端实际上实现了单条旅游路线删除的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 #1

  那假设没有api，只有product details 这些mock data 呢？还能继续用slice 来操作吗？ 我只能想到用那种很原始的方法用如下，如果想用slice操作呢？
  //这个是button
     <button onClick={() => deleteItem(touristRouteId)} alt="delete">
  
  
  //这个是function， 我思路是直接用productdetail里面的mock data filter 出来删除了的touristRouteId再显示
    const deleteItem = (touristRouteId) => {
      dispatch(deleteTouristRouteId(touristRouteId))
  
      const item = Productdetails.find((product) => product.id === touristRouteId)
      dispatch(deleteTouristRouteId(touristRouteId))    
    }

• 阿莱克斯刘 回复 提问者 慕函数5296017 #2

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