Este es mi código:
export default function useUser(){ var userToken = "one" function setToken(value: string) { userToken = value } return { userToken, setToken } }Y esta es mi casa:
export default function Home() { const { userToken, setToken } = useUser() console.log(userToken) setAccessToken("two"); console.log(userToken) } Quiero que mi resultado sea: one two
Pero mi código devuelve: one one
El userToken de usuario es solo una salida de valor de la llamada useUser . Como opuesto a eso setToken es una función que tiene acceso al cierre de useUser . Para que funcione como espera, agregue un método getter llamado getToken que tendrá acceso al cierre de la función useUser .
function useUser() { var userToken = "one"; function setToken(value) { userToken = value; } function getToken() { return userToken; } return { getToken, setToken }; } function Home() { const { getToken, setToken } = useUser(); console.log(getToken()); setToken("two"); console.log(getToken()); return ( <div> {getToken()}{" "} <button onClick={() => { setToken("three"); console.log(getToken()); }} > click me </button> </div> ); } ReactDOM.render(<Home/>, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> Pero aún así, no volverá a renderizar nada después de hacer clic en el botón. Esto se debe a cómo funciona React, solo se procesa cuando cambia el estado. Deberías usar el gancho useState para eso.