PROBLEMA: Los datos devueltos por el servidor solo se representan en la página cuando se actualizan (y no cuando cambio a su ruta)

Entonces, en otras palabras, cuando presiono route /repay , los datos se devuelven desde el servidor pero no se vuelven a representar en la página.

Aquí está mi función que hace lo siguiente:

• obtiene datos del servidor
• toma datos y solicita nuevos datos del segundo servidor
• devuelve datos en la variable tokens

 useEffect(() => { if (userAddress) { (async () => { // fetch data from server const res = await axios.get( `${config.api.invokeUrl}/users/${userAddress}` ); // take data and send to another server const tempTokenMetadata = []; res?.data?.Items?.map(async (loan, index) => { const options = { address: loan?.tokenAddress, token_id: loan?.tokenId, chain: "kovan", }; const tokenIdMetadata = await Moralis.Web3API.token.getTokenIdMetadata(options); tempTokenMetadata.push(tokenIdMetadata); }); setTokens(tempTokenMetadata); })(); } setLoading(false); }, [userAddress]);

Obtengo la dirección de userAddress de mi valor de estado global:

 const [{ userAddress }] = useStateValue();

Así es como estoy representando el código en la página:

 {tokens?.map((token, index) => { return ( <Grid item xs={10} sm={4} md={4} key={index}> <NFT key={index} token={token} /> </Grid> ); })}