React Redux应用问题：删除心愿单时参数传递异常

核心原因 #

你遇到的问题是参数名称不匹配：

• 在Wishlist.jsx的handleDeleteWish函数中，dispatch时传递的参数对象键是wishlistItemId：

  await dispatch(handleDeleteWishEl({ userId, wishlistItemId }));
  

• 但在handleDeleteWishEl这个createAsyncThunk中，解构的参数键是wishlistElId：

  async ({ userId, wishlistElId }, thunkAPI) => { ... }
  

因为键名不一致，wishlistElId自然会拿到undefined，而userId因键名匹配所以正常。

修复方案 #

任选以下一种方式即可解决：

方式1：修改Async Thunk的参数解构 #

把thunk中的wishlistElId改为wishlistItemId，保持和dispatch时的键名一致：

export const handleDeleteWishEl = createAsyncThunk(
  "user/wishlist/delete",
  async ({ userId, wishlistItemId }, thunkAPI) => {
    try {
      console.log("userId inside handleDeleteWishEl:", userId);
      console.log("wishlistItemId inside handleDeleteWishEl:", wishlistItemId);

      const response = await axios.delete(
        `${process.env.REACT_APP_SERVERBASE_URL}/users/${userId}/wishlist/${wishlistItemId}/delete`
      );
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message);
    }
  }
);

方式2：修改dispatch时的参数键名 #

如果不想改动thunk，就调整dispatch时的参数键为wishlistElId：

const handleDeleteWish = async (userId, wishlistItemId) => {
  try {
    console.log("userId:", userId);
    console.log("wishlistItemId:", wishlistItemId);

    // 这里把参数键改成wishlistElId
    await dispatch(handleDeleteWishEl({ userId, wishlistElId: wishlistItemId }));
  } catch (error) {
    console.error("Error removing element from wishlist:", error);
  }
};

额外调试建议 #

以后遇到类似参数传递异常的问题，可以在thunk中先打印完整的payload对象，快速排查键名是否匹配：

export const handleDeleteWishEl = createAsyncThunk(
  "user/wishlist/delete",
  async (payload, thunkAPI) => {
    // 打印完整payload，查看实际传入的键值对
    console.log("传入的完整参数:", payload);
    const { userId, wishlistItemId } = payload;
    // ... 后续代码
  }
);

内容的提问来源于stack exchange，提问作者Matteo Lanci