反应钩子错误：无效的钩子调用。 钩子只能在 function 组件的主体内部调用

Question

When I clicked add to cart button for a individual product then show me error like this:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I have tried like this: here is my cartScreen.js code

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { addToCart } from "../action/cartAction";

const CartScreen = (props) => {
  const productId = props.match.params.id;
  const qty = props.location.search
    ? Number(props.location.search.split("=")[1])
    : 1;
  const disptach = useDispatch;
  useEffect(() => {
    if (productId) {
      disptach(addToCart(productId, qty));
    }
  }, [disptach, productId, qty]);

  return (
    <div>
      <h2>Cart Screen</h2>
      <p>
        Add to Cart : ProductId: {productId} Qty: {qty}
      </p>
    </div>
  );
};

export default CartScreen;

But When I have comment out useEffect hook then does not show me any error:

useEffect(() => {
    if (productId) {
      disptach(addToCart(productId, qty));
    }
  }, [disptach, productId, qty]);

Any suggestion please.

Answer 1

You need to change this from:

  const disptach = useDispatch;

to:

  const disptach = useDispatch(); // useDispatch() is a hook 

Let me know if it works, good Luck