Question

钩子只能在函数组件主体内部调用。错误：钩子调用无效

2022-03-30

1125

javascript reactjs react-native react-hooks

我正在尝试在我的应用中实现购物车。我创建了另一个文件，其中包含我想要调用的函数，但我一直收到无效的钩子调用。

export function CartProvider(props) {
      const [items, setItems] = useState([]);
    
    function addItemToCart() {
        console.log("test")
    }

  return (
    <CartContext.Provider 
      value={{items, setItems, getItemsCount, addItemToCart, getTotalPrice}}>
      {props.children}
    </CartContext.Provider>
  );
}

文件中还有更多代码，但我已将问题缩小到这一点，但只要我导入 CartContext 并将其设为 const，就会出现问题。

import {CartContext} from '../CartContext'
const {addItemToCart} = useContext(CartContext)

export default class ProductCard extends Component {


constructor(props) {
    super(props)
    this.state = {
        name: this.props.postname,
        price: this.props.postprice,
        image: this.props.postimage,
        description: this.props.postDescription,
        quantity: this.props.postquantity,
        
    }
    
}

Answer 1

您只能在函数组件内部使用钩子。因此，您不能在任何函数组件之外使用 useContext(CartContext) 。

我假设您想在 ProductCard 内部使用上下文？那么您必须将其重写为函数组件：

function ProductCard (props){
  const {addItemToCart} = useContext(CartContext)


  return ...

}

或将您的类组件连接到上下文。

在此处了解有关这两种方式的更多信息。