当异步函数 Redux-Toolkit createAsyncThunk 中的第二个条目时，我将其放入 {} 中，并在控制台中得到未定义的值

Question

export const addToBasket = createAsyncThunk(
  "newBasket/addToBasket",
  async (id, {cart}) => {
    return axios
      .get("https://run.mocky.io/v3/04fe3f95-0267-4ab4-a61b-a5f250151459")
      .then((res) => {

        console.log(cart); ---> undefined

        let data = res.data;
        data.map((item) => {
          if (item.id == id) {
            console.log(item);
              cart.push(item);
            }
        });
        return cart;
      });
  }
);

在我发布的代码片段中，我没想到我的异步函数的第二个输入的值是未定义的

Answer 1

向

createAsyncThunk

payload 创建函数 传递两个参数，第一个是传递给分派操作的单个参数值，第二个是

thunkApi

对象。

重构您的代码，以便在传递给有效负载创建者的对象中传递

id

和

cart

。 不要改变传递的

cart

数组，创建新的数组引用并更新它们。将

async/await

与 Promise 链混合使用也是一种反模式，因此请重写

await

GET 请求结果，并通过特定的

id

值附加过滤后的响应数据。

export const addToBasket = createAsyncThunk(
  "newBasket/addToBasket",
  async ({ cart = [], id }, thunkApi) => {
    try {
      const { data = [] } = await axios.get("....");
    
      return cart.concat(...data.filter(item => item.id === id));
    } catch(error) {
      return thunkApi.rejectWithValue(error);
    }
  }
);

用途：

try {
  const newCart = await dispatch(addToBasket({ id, cart })).unwrap();
  ...
} catch(error) {
  ...
}