使用 React Redux 删除 api 删除请求

Question

我无法删除产品，尽管看起来一切正常并且我在控制台中看到类型为 REMOVE_SELECTED_PRODUCT 的操作发生，产品仍在阵列中并且状态似乎未更新？？

所以让我们从 productActions.js

开始

export const removeSelectedProduct = (id) => {
  return {
    type: REMOVE_SELECTED_PRODUCT,
    payload: id,
  };
};
export const removeProduct = (id) => {
  return async (dispatch) => {
    dispatch(removeSelectedProduct(id));
    try {
      console.log(id); // this is for test, and i see in console that proper id is printed
      await axios.delete(`https://fakestoreapi.com/products/${id}`);
    } catch (err) {
      console.log(err);
    }
  };
};

现在 productsReducer.js

const intialState = {
  products: [],
};

export const productsReducer = (state = intialState, { type, payload }) => {
  switch (type) {
    case SET_PRODUCTS:
      return { ...state, products: payload };
    case ADD_PRODUCT:
      return { ...state, products: [...state.products, payload] };
    case REMOVE_SELECTED_PRODUCT:
      return {
        ...state,
        products: state.products.filter((el) => el.id !== payload),
      };
    default:
      return state;
  }
};

我在 ProductDetails.js 中将其用作 button，因此该组件有完整的代码：

const ProductDetails = ({ removeProduct, product }) => {
  const { productId } = useParams();
  const { image, title, price, category, description } = product;
  const dispatch = useDispatch();
  const fetchProductDetail = async (id) => {
    const response = await axios
      .get(`https://fakestoreapi.com/products/${id}`)
      .catch((err) => {
        console.log("Err: ", err);
      });
    dispatch(selectedProduct(response.data));
  };

  useEffect(() => {
    if (productId && productId !== "") fetchProductDetail(productId);
  }, [productId]);
  return (
    <div>
      {Object.keys(product).length === 0 ? (
        <div>...Loading</div>
      ) : (
        <div>
          <img alt={productId} src={image} />

          <div>
            <h1>{title}</h1>
            <h2>
              <p>${price}</p>
            </h2>
            <h3>{category}</h3>
            <p>{description}</p>
            <button>Add to Cart</button>
            <button onClick={() => removeProduct(productId)}>Usuń</button>
          </div>
        </div>
      )}
    </div>
  );
};
const mapStateToProps = (state) => {
  return {
    products: state.allProducts.products,
    product: state.product,
  };
};

const mapDispatchToProps = {
  removeProduct,
  selectedProduct,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductDetails);

如果有人找不到问题，我会很高兴。正如我所说，动作和 id 被打印到控制台： console output on clicking the button

可能状态有问题，删除的时候状态没有更新？ Idk，请帮助我:(

Answer 1

由于产品具有数字类型 ID，而您提供的是字符串，即 2 !== "2"

这样做：

    dispatch(removeSelectedProduct(+id));//change string to number
...
...
    await axios.delete(`https://fakestoreapi.com/products/${+id}`);//similarly here

使用 React Redux 删除 api 删除请求

Deleting with React Redux api delete request

javascript

reactjs

redux