Question

当我点击单个产品的 add to cart 按钮时，显示如下错误：

<块引用>

错误：无效的挂钩调用。 Hooks 只能在 body 内部调用一个功能组件。这可能发生在以下情况之一原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用中拥有多个 React 副本，请参阅 https://reactjs.org/link/invalid-hook-call 以获取有关如何调试的提示并解决这个问题。

我试过这样：这是我的 cartScreen.js 代码

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;

但是当我注释掉 useEffect 钩子时，不会显示任何错误：

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

请提出任何建议。

Answer 1

您需要将其更改为：

Route::get('attack/{debate?}/{argument?}', 'AttackController@index')->middleware('auth');

到：

  const disptach = useDispatch;

让我知道它是否有效，祝你好运

反应钩子错误：无效的钩子调用。 Hooks 只能在函数组件内部调用

1 个答案: