Recibo el error a continuación.
Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
Consulte (enlace que no pude agregar) para obtener sugerencias sobre cómo depurar y solucionar este problema.
Aquí está mi código. ¿Está rompiendo las reglas de los ganchos o el problema es otro?
import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { useData } from 'useData'; export const checkReference = ({ refId, }) => { const data = useData(); //useContext hook let refData = {}; if (refId) refData = data.getReference(refId); useEffect(() => { console.log('INITIAL LOGIC'); if (refData.parameter){ console.log('SECONDARY LOGIC', refData); } }, []) checkReference.propTypes = { refId: PropTypes.string, } checkReference.defaultProps = { refId: null, } } Lo estoy llamando desde otro archivo usando checkReference('page-name');
Los ganchos de reacción están destinados a usarse dentro de componentes funcionales como:
export const CustomComponent = () => {} export function CustomComponent() {} No se pueden usar en la función normal porque no existirán dentro del contexto de un componente React. Si desea utilizar cosas como useState o useEffect dentro de funciones definidas fuera de un componente, debe crear un gancho personalizado. Es decir, cree una función con el prefijo use (por ejemplo useCheckReference ) y luego úsela como:
export const MyComponent = () => { const reference = useCheckReference() }De esa manera, React sabe que esa función presumiblemente se llamará dentro de un componente y el uso de ganchos es confiable, también realizará algunas optimizaciones relacionadas con los ganchos y el ciclo de vida de los componentes.