如何在按鈕點擊反應時再次調用useEffect？

Question

我是反應的初學者。 我正在做一個小項目。 如何在購物車中添加產品，我被困在重新渲染 useEffect 中。 所以我想要的是在按鈕單擊時重新渲染 useEffect 。 我怎么做？

這是我的購物車組件

import React, { useContext, useEffect, useState,useCallback } from "react";
import { UserContext } from "./Context";
import { useHistory } from "react-router";
import cartImage from "../assets/man-shopping.png";
import Axios from "axios";

const Cart = () => {
  const { user, serUser } = useContext(UserContext);
  const history = useHistory();
  const [product, setProduct] = useState([]);

  const removeFromCart = (item) => {
    Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
      setProduct(
        product.filter((item) => {
          return item.Id !== res.data.Id;
        })
      );
    });
  };

  useEffect(() => {
    Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
      setProduct(res.data);
    });
  }, [user]);


  return (
    <div
      className="d-flex align-items-center justify-content-center"
      style={{ height: "90vh" }}
    >
      {user.role === undefined ? (
        <div>
          <button
            className="btn btn-lg btn-primary bg-green"
            onClick={() => {
              history.push("/login");
            }}
          >
            Please Login
          </button>
        </div>
      ) : (
        <div>
          {product.length === 0 ? (
            <figure className="figure">
              <img
                src={cartImage}
                alt="cart"
                style={{ width: "100px", height: "100px" }}
              />
              <figcaption className="figure-caption text-xs-right">
                No Product Added
              </figcaption>
            </figure>
          ) : (
            <div className="d-flex">
              {product.map((item) => {
                return (
                  <div className="card">
                    <img
                      src={new Buffer.from(item.pimg).toString("ascii")}
                      className="img-fluid crd-img"
                    />
                    <div className="card-body">
                      <h5 className="card-title">{item.pname}</h5>
                      <p className="card-text">{item.pprice}</p>
                      <button
                        className="btn btn-primary"
                        onClick={() => removeFromCart(item)}
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default Cart;

所以我將removeFromCart function 作為 useEffect 依賴項，所以它工作正常，但它一次又一次地調用后端。

 const removeFromCart = (item) => {
    Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
      setProduct(
        product.filter((item) => {
          return item.Id !== res.data.Id;
        })
      );
    });
  };

  useEffect(() => {
    Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
      setProduct(res.data);
    });
  }, [user,removeFromCart]);

有沒有其他方法可以重新渲染 useEffect

Answer 1

你需要的不是useEffect。 使用“ state ”來存儲項目，並在“狀態”更新時使用 setState 添加或刪除項目反應將自動重新渲染。 您可以使用更新后的 state 保存在您的數據庫中。 在調用 axios 之前還要更新 state

Answer 2

將 axios.get 放入 function 中。

const getProduct = useCallback(() => {
    Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
        setProduct(res.data);
    });
}, [user]);

const removeFromCart = (item) => {
    Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
        getProduct();
    });
};

useEffect(() => {
    getProduct();
}, [getProduct]);

Answer 3

您可以像這樣添加 boolean state：

const [isClicked, setIsCliked] = useState(false);

並在單擊按鈕時調整 boolean 值

 const removeFromCart = (item) => {
    Axios.delete(`http://localhost:3002/cart/${item.Id}`).then((res) => {
      setProduct(
        product.filter((item) => {
          return item.Id !== res.data.Id;
        })
      );
      setIsCliked(bool => !bool)
    });
  };

你的 useEffect 現在可能看起來像這樣：

      useEffect(() => {
    Axios.get(`http://localhost:3002/cart/${user.Id}`).then((res) => {
      setProduct(res.data);
    });
  }, [user.id,isClicked]);

必須有更好的方法，但這應該有效