Estoy tratando de implementar un carrito de compras en mi aplicación. Creé otro archivo que tiene las funciones que quiero que me llamen. Sigo recibiendo una llamada de gancho no válida.
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> ); }Hay más código en el archivo, pero reduje el problema a esto, pero tan pronto como importo CartContext y lo convierto en constante, aparece el problema.
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, } }Puede usar ganchos solo dentro de los componentes de función. Por lo tanto, no puede usar useContext(CartContext) así fuera de cualquier componente de función.
Supongo que desea utilizar el contexto dentro de ProductCard . Entonces tienes que reescribirlo en un componente de función:
function ProductCard (props){ const {addItemToCart} = useContext(CartContext) return ... }o conecte su componente de clase al contexto.
Lea más sobre ambas formas aquí