La estructura básica de mi gancho:
const useMyHook = () => { const func1 = (): boolean => { ... } const func2 = (type: "type1" | "type2"): boolean => { ... } const func3 = (): boolean => { ... } return { func1, func2, func3 } } export default useMyHookActualmente lo estoy usando así, que funciona en dev , pero rompe mi compilación.
import useMyHook from "../hooks/useMyHook"; const { func1 } = useMyHook() const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const isValid = func1(); if (isValid) { // do more things } } return ( <form>...</form> ) Cuando ejecuto yarn build , me encuentro con este error:
Objects are not valid as a React child (found: object with keys {func1, func2, func3}). If you meant to render a collection of children, use an array instead.
Mi intento de resolver esto fue exportar mis funciones de enlace personalizadas en una matriz, como parecía sugerir el error.
return [ func1, func2, func3 ]Y usándolo así:
const [ func1 ] = useMyHook(); const isValid = func1();TypeScript no está contento con esto:
An argument for 'type' was not provided. Pero esto es confuso, porque func1 no acepta un argumento de type como lo hace func2 .
¿Hay alguna forma de solucionar este error de tiempo de compilación y exportar el { } de las funciones? Esto se siente como el enfoque más limpio.
Si no hay forma de lograr 1 , ¿cómo puedo usar correctamente la matriz de funciones exportada sin que mis tipos se lean mal?
No hay problema en devolver un objeto de un gancho.
El problema está en algún lugar dentro de un render , estás renderizando los resultados del enlace. No publicó la parte de representación de su componente.
Además, por lo general, custom hooks se construyen encima de otros ganchos. Si no usa ningún otro gancho dentro de su gancho personalizado, no es realmente un gancho, es solo una función (tal vez use el prefijo solo si realmente define un gancho sobre otros ganchos)