react-redux 中的 onclick 事件触发

Question

购物车.js

const Cart = () => {
const cartListing = useSelector(state => state.cartList);
const {cart, loading, error} = cartListing;
const dispatch = useDispatch();
const removeFromCartHandler = (id) => {
    dispatch(removeFromCart(id))
};  // =======>>>>> This function needs to dispatch on onclick event but it fire on first time load and does not fire on click
useEffect(() => {
    dispatch(cartList());
    return () => {

    }       
},[]);
return(
<button type="button" className="button" onClick={removeFromCartHandler()} >Delete </button>

动作.js

const cartList = () => async (dispatch) => {
  try {
    dispatch({ type: CART_LIST_REQUEST });
    const { data } = await axios.get('http://localhost:3001/cart');
    dispatch({ type: CART_LIST_SUCCESS, payload: data.data.cartRecords });
  }
  catch (error) {
    dispatch({ type: CART_LIST_FAIL, payload: error.message });
  }
};

const removeFromCart = (id) => async (dispatch) => {
 try {
    dispatch({ type: CART_REMOVE_ITEM, payload: id });
    const { data } = await axios.delete(`http://localhost:3001/cart/${id}`);
    dispatch({ type: CART_REMOVE_SUCCESS, payload: data });
 }
 catch (error) {
    dispatch({type: CART_REMOVE_FAIL, payload: error.message})
 }
};

export { cartList, removeFromCart };

我不知道为什么 removeFromCartHandler() 在第一次加载时触发，而不是在点击时触发。 我希望 removeFromCartHandler() 这个函数不是在第一次加载时触发 onclick 事件，因为我也没有添加到 useEffect 钩子中，cartList 在第一次很好调度，但是 removeFromCartHandler() 函数需要在 onClick 事件上调度。 我想我在这里缺少一些钩子的概念。 我是 react-redux 的新手并被困在这里。 任何帮助将被应用

Answer 1

您的 onClick 处理程序是错误的。 像这样做

onClick={() => removeFromCartHandler()}

Answer 2

它被调用是因为您正在调用它- 在removeFromCartHandler调用该函数之后放置() 。

onClick={removeFromCartHandler()}

Answer 3

您需要添加更多代码以获得更好的上下文，但您必须做的是这样的

onClick={(e) => removeFromCartHandler(e, item.id)}

您的主要功能希望获得 id，您必须以某种方式传递它。 我假设您渲染购物车项目或执行类似操作，无论如何使用此实现不会传递正确的 id。