Tengo 2 módulos una vez conocidos como aplicación y otro donde creo variables exportables, en una de las variables exportables quiero que cambie el estado dentro de la aplicación. por favor aconsejeme sera muy apreciado.
import "./styles.css"; import {submit} from "./ex" export default function App() { const [loading,notLoading] = ("false") return ( <div className="App"> <button onClick={submit}> click me </button> </div> ); }// Módulo exportable ex.js
const objectFunc = (data) => { return dummy(data) } const dummy = (e) => { if(e === "k") { poster(e) } else { console.log("failed") } } const poster = (e) => { // need to update state from this function console.log(e,"posted") } // submit function - called when submitted. export const submit = (e) => { objectFunc("ek") }hay algunas cosas mal aquí, lo primero dentro del componente de la App , supongo que tenía la intención de usar useState con una variable llamada false , ahora a su pregunta, no se recomienda separar las funciones que no son puras del componente, ya que necesita para manipular el estado, puede colocarlo dentro del componente de la aplicación, pero solo para resolver su problema, eche un vistazo a este nuevo código:
App.js
import "./styles.css"; import { submit } from "./ex"; import { useState } from "react"; export default function App() { const [loading, setLoading] = useState(false); return ( <div className="App"> <button onClick={(e) => submit(e, setLoading)}> click me </button> {loading && <div>loading</div>} </div> ); } ex.js
const objectFunc = (data, setLoading) => { return dummy(data, setLoading); }; const dummy = (e, setLoading) => { poster(e, setLoading); if (e === "k") { } else { console.log("failed"); } }; const poster = (e, setLoading) => { // need to update state from this function console.log(e, "posted"); setTimeout(() => setLoading(false), 1000); }; // submit function - called when submitted. export const submit = (e, setLoading) => { setLoading(true); objectFunc("ek", setLoading); };Lo que hice fue pasar la función de devolución de llamada a todas las funciones que la usaron, nuevamente, no se recomienda, pero esto debería resolver su problema
(ps acaba de agregar el tiempo de espera para mostrar los cambios de carga)
const objectFunc = (data, setExample) => { return dummy(data, setExample); }; const dummy = (e, setExample) => { if (e === "e") { poster(e, setExample); } else { setExample(false); console.log("failed"); } }; const poster = (e, setExample) => { console.log(e, "posted"); setExample(true); }; export const submit = (e, setExample) => { setExample(true); objectFunc("ek", setExample); }; import { useState } from "react"; import { submit } from "./global"; import "./styles.css"; export default function App() { const [example, setExample] = useState(false); return ( <div className="App"> <button onClick={(e) => submit(e, setExample)}> click me </button> <div className="test"> {example ? <span>Data is Here!!!!</span> : <span>No Data Show :(</span>} </div> </div> ); } .test { margin-top: 1rem; }
Espero que te funcione :)
Puede pasar alguna función que establezca el estado como función de devolución de llamada, similar a
const objectFunc = (data, callback) => { return dummy(data, callback); }; const dummy = (e, callback) => { if (e === "k") { poster(e, callback); } else { console.log("failed"); } }; const poster = (e, callback) => { // need to update state from this function console.log(e, "posted"); let somevalue = "value"; callback(somevalue); }; // submit function - called when submitted. export const submit = (e, callback) => { objectFunc("ek", callback); };Aplicación.js
import { submit } from "./ex"; import { useState } from "react"; export default function App() { const [st1, setSt1] = useState(1); const setState1 = (value) => { setSt1(value); }; return ( <div className="App"> <button onClick={(event) => submit(event, setState1)}> click me </button> <div>{st1}</div> </div> ); }