react redux中onclick上的事件fire

Question

cart.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>

action.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在第一次调用时是精细调度的，但removeFromCatHandler(((函数需要在onclick事件上进行调度。我想我遗漏了一些钩子的概念。我是新手，反应迟钝。任何帮助都将通知

Answer 1

您的onClick处理程序错误。像这个吗

onClick={() => removeFromCartHandler()}

Answer 2

之所以调用它，是因为您正在调用它-将()放在removeFromCartHandler调用函数之后。

onClick={removeFromCartHandler()}

Answer 3

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

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

你的主函数期望得到id，你必须以某种方式传递它。我假设您呈现购物车项目或做类似的事情，无论如何，使用此实现将不会传递适当的id。