1

我的组件中有一个元素列表，每个列表都有一个删除按钮。虽然删除工作得很好，但问题是它没有更新 ui 要更新 ui 我需要刷新我的页面来更新它。

我试图找到问题，但无法找到它。

这些是我的代码。

行动

export const deleteCartItem = (cartId) => (dispatch) => {
  new _rest()
    .delete(`order/cart?cartIds=${cartId}`)
    .then((response) => {
      dispatch({
        type: actionTypes.DELETE_CART_ITEM,
        payload: response.data.status,
        cartId: cartId,
      });
      dispatch(getItemsAddedToCart());   <--- here getItemAddedtoCart action my @get request to server to get all the item in cart.
    })
    .catch((err) => {
      dispatch({
        type: actionTypes.DELETE_CART_ITEM_ERROR,
        error: err,
      });
    });
};

减速器.js

    const initialState = {
      isFetching: false,
     fetched: false
      teamWithZero: null,

    };

    export default (state = initialState, action) => {
      switch (action.type) {
        case actionTypes.GET_CART_LOAD:
          return {
            ...state,
            isFetching: true,
          };
        case actionTypes.GET_CART_SUCCESS:

          const teamWithZero = action.payload._embedded.cartResourceList.filter(
            (item) => {
              return item.teamWith === 0 && item.priceType === "TEAM";
            }
          );


          console.log("teamzero-3", teamWithZero);
          return {
            ...state,
            teamWithZero: teamWithZero,

            fetched: true,
            isFetching: false,
          };
case actionTypes.DELETE_CART_ITEM:
      return {
        ...state,
        cartList: state.cartList.filter(
          (item) => item.cartId !== action.cartId
        ),
        status: action.payload,
      };
    case actionTypes.DELETE_CART_ITEM_ERROR:
      return {
        ...state,
        error: action.error,
      };

CartContainer.js

if (isFetching) {
  return <p>Loading...</p>;
} else if (fetched) {
  return (
    <Grid contaner lg={12}>
      <Cart 
        deleteCartItem={deleteCartItem}
        teamWithZero={teamWithZero}
      />
    </Grid>
  );

CartContainer.jsx

<Grid contaner lg={12}>
          <Cart
            teamWithZero={teamWithZero}
          />
        </Grid>

购物车.jsx

{teamWithZero && teamWithZero.length > 0 && (
              <WaitingCartItem waitingItem={teamWithZero} teamBanner={true} />
            )}

WaitingCartItem.jsx

const WaitingCartItem = ({
  waitingItem,
  handleCheckBoxChange,
  withTeam,
  teamBanner,
}) => {
  const [waitingData, setWaitingData] = useState([]);

  useEffect(() => {
    setWaitingData(waitingItem);
  }, [waitingItem]);

  return waitingData.map((item, index) => {
    return (
      <Grid
        key={item.productId}

        container
        className="margin15"
      >
        <Grid
           className="cart"
        >
          <Grid container justify="flex-end" item xs={1}>
            <Checkbox
              onChange={handleCheckBoxChange}
              style={{ padding: "0px" }}
            />
          </Grid>

        </Grid>
      </Grid>
    );
  });
};
4

0 回答 0