Tengo una función que actualizará el valor de mi objeto según el nombre de la aplicación usando el gancho useState. Pero no puedo usar el gancho, da un error de llamada de gancho no válida.
Cualquier otra forma de lograr lo mismo también funcionará.
var myfun = (function() { const APP_NAME= "sample app" const [object, setObject] = useState({obj: 'value'}) if(APP_NAME =="sample app") { setObject({obj:'new value'}) console.log('here') } return object }); myfun();Cree un gancho personalizado en lugar de esa función:
const useMyFun = () => { const [object, setObject] = useState({obj: 'value'}); const APP_NAME = 'sample name'; useEffect(() => { if (APP_NAME === 'sample name') setObject({obj: APP_NAME}); }, [APP_NAME]); return object; } // In the component you need it: const SomeComponent = () => { // will update if state changes in the useMyFun Hook; const appname = useMyFun(); // rest of your component code ... }asegúrese de usar componentes funcionales para usar esto.
NOTA: pero esto solo será útil si APP_NAME alguna vez cambia. de lo contrario, podría usar un operador ternario simple:
const object = APP_NAME === 'sample name' ? {obj: APP_NAME} : {obj: 'value'}Intente mover la llamada de gancho fuera de la función de esta manera y el error de llamada de gancho no válido desaparecerá, creo:
import React from "react"; import { useState } from "react"; function App() { const [object, setObject] = useState({ obj: "value" }); const myfun = () => { const APP_NAME = "sample app"; if (APP_NAME === "sample app") { setObject({ obj: "new value" }); console.log("here"); } return object; }; myfun(); return ( .... ); } export default App;Espero que esto te ayude .