Récupérer créant une boucle infinie

Vous n'attribuez jamais la valeur de retour de getGames () à quoi que ce soit.

Essayez de changer cela ..

var gottenGames = JSON.stringify(getGames(), null, 2);

À ceci. ..

var gottenGames = JSON.stringify(responseData.Games, null, 2);
getGames();

En fait, ce n'est pas la bonne façon de récupérer des données dans React . L'extrait de code ci-dessous montre comment effectuer la récupération de données dans React. Il existe quelque chose qui s'appelle les hooks [useEffect] qui vous permet d'effectuer des actions secondaires dans un composant.

// declaring state variable
const [responseData, setResponseData] = useState([]);

// inside your data fetching function
const data = await response.json();
setResponseData(() => data.games)

Tout ce que j'ai changé dans votre code a été d'envelopper votre appel de récupération de données dans un useEffect hook.

Une autre chose à noter ici est que faire ceci const responseData = []; est probablement une mauvaise idée. Les mutations dans React ne doivent être gérées qu'en utilisant useState ou l'état du composant pour les composants basés sur les classes. Ainsi, votre reponseData devrait ressembler à cet extrait ci-dessous.

import React, { useState, useEffect } from "react";
import Loading from "../components/Loading";
import { useAuth0 } from "../react-auth0-spa";

const Profile = () => {
  const { loading, user } = useAuth0();
  function subSplitter(subscriber) {
    return subscriber.sub.split("|")[1];
  }

  var sub = subSplitter(user);

  console.log(sub);

  const [showResult, setShowResult] = useState(false);
  const [apiMessage, setApiMessage] = useState("");
  const { getTokenSilently } = useAuth0();
  const responseData = [];

  useEffect(() => {
    const getGames = async () => {
      try {
        const token = await getTokenSilently();

        const response = await fetch("http://localhost:5000/api/users/" + sub, {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });

        const responseData = await response.json();

        setShowResult(true);
        setApiMessage(responseData);
        console.log(responseData.games);
        return responseData.games;
      } catch (error) {
        console.error(error);
      }
    };
    getGames();
  }, []);

  var stringUser = JSON.stringify(user, null, 2);
  var gottenGames = JSON.stringify(responseData.Games, null, 2);

  if (loading || !user) {
    return <Loading />;
  }

  return (
    <div>
      <img
        src={user.picture}
        alt="Profile"
        className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
      />

      <h2>{user.name}</h2>
      <p className="lead text-muted">{user.email}</p>

      <p>{stringUser}</p>
      <p>{gottenGames}</p>
    </div>
  );
};

export default Profile;

Faites-moi savoir si cela clarifie les choses ou non!

p>

Je pense que vous êtes conscient du comportement asynchrone de javascript. Je note donc quelques bugs dans votre code:

1. Donc, var gottenGames = JSON.stringify (responseData.Games, null, 2); s'exécute avant d'appeler API pour lui attribuer des données, il a donc non défini ;
2. Un autre problème est const responseData = []; vous déclarez const à responseData dans le composant et aussi dans la fonction getGames donc les données renvoyées ne sont affectées qu'à la variable locale const à l'intérieur de la fonction et la variable const externe n'a pas changé.