cartel de primera vez aquí. Soy bastante nuevo en React y JS en general, y he estado trabajando en NextJS. Curiosamente, mi proyecto funciona bien cuando ejecuto next dev , pero falla cuando uso next build .
Obtuve el siguiente error:
Error: React Hook "useFunction" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks Lo interesante de useFunction es que no es un gancho: lo defino como una función en el mismo archivo que un componente FunctionButton y lo uso como parte del controlador de eventos onClick
const useFunction = async () => { const result = await someStuff(); return result } const FunctionButton = () => { return <Button onClick={() => useFunction()}>Click Me</Button>; }; export default FunctionButton;¿Alguna idea de por qué esto no se está construyendo con éxito? ¡Gracias por adelantado!
La razón por la que piensa que useFunction es un gancho es porque así es como funcionan las verificaciones de pelusa de React. Se basan en el prefijo use para determinar que es un gancho:
Proporcionamos un complemento ESLint que hace cumplir las reglas de Hooks para evitar errores. Asume que cualquier función que comience con "use" y una letra mayúscula inmediatamente después es un Hook.
Entonces, simplemente porque su función comienza con use , React lo toma como un gancho. Una solución sería cambiar el nombre de su función o agregar un comentario eslint-ignore .
React considera los archivos cuyo nombre comienza con la palabra use como ganchos aunque no lo sean.
Hay dos maneras de resolver el problema:
use )/* eslint-disable */ block comment en la parte superior del archivo.