使用 React Redux api 删除请求删除答案

【问题标题】：Deleting with React Redux api delete request使用 React Redux api 删除请求删除
【发布时间】：2021-12-15 19:43:37
【问题描述】：

我无法删除产品，尽管看起来一切正常，并且我在控制台中看到了以下类型的操作：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，请帮助我:(

【问题讨论】：

通过执行此产品检查日志记录：state.products.filter((el) =>{ console.log(e.id,payload);return el.id !== payload})
@MhkAsif imgur.com/a/2cCogiG 这是 ig 给我的，所以我拥有的所有产品 ID 以及我当前要删除的产品 ID
所以我猜它似乎工作正常

标签： javascript reactjs redux

【解决方案1】：

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

这样做：

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

【讨论】：