如何解决React Redux有效负载未传递到状态对象的问题

Question

嘿，所以我在一家网上商店工作，我正在使用MERN堆栈。因此，在这家商店中，我有3种服装类别：

1. 男衣服
2. 女衣服
3. 孩子们的衣服

所以现在我很想处理用户购物车，所以当用户单击添加到购物车按钮时，我会使用 axios.all 发送3个以上的联合axios获取请求。 strong>，以便我可以根据产品ID获取正确的商品数据。

所以我确实成功地从服务器取回了正确的产品，当我控制台注销响应时，我得到了想要的东西

现在的问题是数据没有传递到购物车，我什至试图删除添加逻辑，即使它们是重复的，现在我正在添加的地方，因为我以为reducer中的逻辑会导致错误，所以我将其更改为仅添加任何进来的内容，因此，如果是我的逻辑中断了，但仍然无法将数据传递到购物车中，我仍可以缩小范围，我可以在这里获得帮助吗？

下面的代码是我的cartActions.js

const addToCart = (productId, qty) => async (dispatch) => {
  try {
    const femaleProduct_url = `http://127.0.0.1:5000/single-womens-clothes/${productId}`;
    const maleProduct_url = `http://127.0.0.1:5000/single-mens-clothes/${productId}`;
    const kidsProduct_url = `http://127.0.0.1:5000/single-kids-clothes/${productId}`;

    const femaleProduct_request = await axios.get(femaleProduct_url);
    const maleProudct_request = await axios.get(maleProduct_url);
    const kidsProduct_request = await axios.get(kidsProduct_url);
    let data = [];

    axios
      .all([femaleProduct_request, maleProudct_request, kidsProduct_request])
      .then(
        axios.spread((...responses) => {
          const f_product = responses[0];
          const m_product = responses[1];
          const k_product = responses[2];

          if (f_product.data.length > 0) {
            data = f_product.data;
          } else if (m_product.data.length > 0) {
            data = m_product.data;
          } else {
            data = k_product.data;
          }
        })
      )
      .then((response) => {
        console.log("DATA: ", data);
      })
      .catch((error) => {
        console.log(error);
      });

    dispatch({
      type: CART_ADD_ITEM,
      payload: data,
    });
  } catch (error) {}
};

export default addToCart;

下面的代码是cartReducer.js

const cartReducer = (state = { cartItems: [] }, action) => {
  switch (action.type) {
    case CART_ADD_ITEM:
      const item = action.payload;

      return { cartItems: [...state.cartItems, item] };
    default:
      return state;
  }
};

export default cartReducer;

Answer 1

您需要在CART_ADD_ITEM结束所有请求之后分派axios：

.then((response) => {
  dispatch({
    type: CART_ADD_ITEM,
    payload: data,
  });
})

还要注意，axios.all和axios.spread are deprecated赞成Promise.all：

const femaleProduct_request = axios.get(femaleProduct_url);
const maleProudct_request = axios.get(maleProduct_url);
const kidsProduct_request = axios.get(kidsProduct_url);

Promise.all([femaleProduct_request, maleProudct_request, kidsProduct_request])
  .then((responses) => {
      const f_product = responses[0];
      const m_product = responses[1];
      const k_product = responses[2];

      // [...]

      return data
    })
  .then((data) => {
    dispatch({
      type: CART_ADD_ITEM,
      payload: data,
    });
  })