Question

您好，我正在尝试创建一个函数，当您在产品页面上单击“添加到购物车”时会调用该函数。这个函数在一个单独的文件中，被导入到产品页面，被称为onClick。但是，我收到此错误，指出无效的 Hooks 调用。我做错了什么？

import {AuthContext} from '../context/auth'
import gql from 'graphql-tag'
import {Button} from 'semantic-ui-react'
import {useMutation} from '@apollo/react-hooks'

const AddtoCart = (id) => {
    console.log(id)                                         //id gets logged into the console here. 
    
    const [errors,setErrors] = useState({})                 ////shows error right here <<
   
    const {user} = useContext(AuthContext);                 
    const[addtoCart,{loading}] = useMutation(ADDTOCART,{
        update(_,result){
            //TODO: remove this alert
            
            alert('success')
        },
        onError(err){
           alert('error')
            
        },
        variables:{
            productID:id
        }

    })
    if(user){
        addtoCart(id)
    }
    else{
      if(localStorage.getItem('cart')){
        cart = JSON.parse(localStorage.getItem('cart'));
        cart.unshift(id);
        localStorage.removeItem('cart');    
        localStorage.setItem('cart', JSON.stringify(cart));

      }else{
          var cart = [id];
          localStorage.setItem('cart', JSON.stringify(cart));
      }

    }
   
}


const ADDTOCART = gql`
    mutation addtoCart($productID: ID!){
        addtoCart(productID: $productID)
    }


`

export default AddtoCart;```

Answer 1

看起来您正在导出 AddToCart 并从 onClick 调用它？这将不起作用，因为 useState 是从错误的上下文中调用的。不同之处在于这个函数本身不是一个 React 组件。在 React 组件内部调用函数是不够的，钩子调用需要发生在自定义钩子（在组件中调用）或组件中。

如果你想让你正在使用的函数修改状态，那么你可以将 setErrors 函数作为参数传递给它，并在呈现的组件内部调用 useState按钮。您应该对 useMutation 和 useContext 执行相同的操作。

我建议将钩子提升到包装组件中，然后将 user 传递给相关逻辑：

function addToCart(user, id) {
  if(user){
    addtoCart(id)
  }
  else {
    if(localStorage.getItem('cart')) {
      cart = JSON.parse(localStorage.getItem('cart'));
      cart.unshift(id);
      localStorage.removeItem('cart');    
      localStorage.setItem('cart', JSON.stringify(cart));
    } 
    else {
      var cart = [id];
      localStorage.setItem('cart', JSON.stringify(cart));
    }
  }
}

只要将钩子调用移动到容器范围内，就可以在 onClick 中调用此函数

我绝对推荐阅读the rules of hooks。它比我解释为什么不能在嵌套函数中使用钩子做得更好。

为什么我会收到此 Invalid Hooks Call 错误？

1 个答案: